Смарт-баннер v2

Обзор

AppsFlyer предоставляет SDK для смарт-баннеров, который рекламодатели могут интегрировать в свои сайты. Назначение SDK — получать все необходимые данные для динамического отображения смарт-баннеров. SDK для смарт-баннеров также автоматически создает корректные ссылки атрибуции, чтобы вам не приходилось создавать их вручную.

Поэтому SDK для смарт-баннеров должен быть доступен со всех страниц, на которых отображаются ваши мобильные баннеры.
SDK для смарт-баннеров выполняет аутентификацию с помощью уникального веб-ключа, который можно получить в рабочей области сайта.

Установка

Smart banners only

You can either copy the smart banner script from the AppsFlyer dashboard or from below.

1. Copy the script code snippet in one of the following ways:

   • Copy the script from the Smart Banner’s Website workplace in the AppsFlyer dashboard. Your web key is already included in the script.
   • Copy the script from the the code snippet below and replace YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.

<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","banners",{banners: {key: ">>>>>YOUR_WEB_KEY<<<<"}});
// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner');
</script>

2. Paste the code snippet in the head на сайте. Он должен располагаться ближе к началу тега head .

ℹ️

Примечание

The showBanner в конце кода установки может содержать больше параметров. Узнать больше

Smart banners and People-Based Attribution

1. Replace the YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
2. Вместо заполнителя YOUR_PBA_KEY укажите в скрипте свой веб-ключ разработчика. Этот веб-ключ формируется при создании пакета брендов.
3. Вставьте этот фрагмент кода в тег head сайта. В теге head он должен располагаться ближе к началу.

<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF", "pba,banners",{pba: {webAppId: "YOUR_PBA_KEY"}, banners: {key: "YOUR_WEB_KEY"}});
// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});
</script>

Управление шрифтом Smart Banner

Использование того же шрифта в смарт-баннере, что и на остальной части сайта, создает последовательный и целостный визуальный образ вашего бренда.

Чтобы изменить шрифт смарт-баннера по умолчанию, необходимо добавить следующее правило в CSS:

[data-af-custom-fonts="af-creatives-text"] {
    font-family: PUT-YOUR-CUSTOM-FONT-HERE !important;
}

Например:

[data-af-custom-fonts="af-creatives-text"] {
    font-family: museo-sans !important;
}

🚧

• The !important требуется
• Убедитесь, что шрифт уже загружен на вашем сайте.
• Пользовательский шрифт будет применяться ко всем баннерам на сайте.
• Если шрифт отображается некорректно, пересохраните баннер в редакторе креативов.

Функции SDK

showBanner

Сигнатура метода

AF('banners', 'showBanner', { bannerContainerQuery: String,
              bannerZIndex: Integer,              
              additionalParams: <Key, Value Dictionary>);

Описание
Начинает показ смарт-баннера в соответствии с ключом баннера, указанным во фрагменте кода.

ℹ️

Примечание

Не используйте эту функцию, если смарт-баннеры реализуются в приложении-обертке или в гибридном приложении для загрузки страницы баннера из приложения (а не из браузера), поскольку при использовании showBanner баннер будет отображаться в приложении. Если вы все же используете showBanner для приложения-обертки или гибридного приложения, применяйте hideBanner для загрузки мобильного приложения.

Входные аргументы

Примеры использования

• Добавление параметров в URL-адрес OneLink

AF('banners', 'showBanner', { additionalParams: { deep_link_value: "apples", deep_link_sub1: "22", af_adset: "my_adset"}});

• Установите Z-index этого баннера и Id контейнера для его размещения

AF('banners', 'showBanner', { bannerContainerQuery: "#my-container-id"
                              bannerZIndex: 999});

updateParams

Сигнатура метода

AF('banners', 'updateParams', { <Key, Value Dictionary> });

Описание
Программно добавьте до 10 параметров (например, deep_link_value) в URL-адрес OneLink, назначенный кнопке с призывом к действию (CTA), после отображения баннера.

Входные данные — это объект с ключами и значениями параметров.

Ключ не может иметь пустое значение.
Ключ нельзя назвать undefined, null, NaN или arg
Недопустимые символы:
Ключ: /, \, *, !, @, #, ?, $, %, ^, &, ~, ``, =, +, ', ", ;, :, >, <
Значение = \, ;, $, >, <, ^, #, ``

• Параметры добавляются как параметры запроса в URL-адрес OneLink.
• Когда для добавления параметров вы используете updateParams, URL-адрес показа отличается от URL-адреса клика.
• Добавленные параметры не заменяют параметры в исходном URL-адресе OneLink. Если добавляемый параметр уже присутствует в URL-адресе OneLink, он не изменяется.
• Если updateParams вызывается более одного раза, к URL-адресу добавляются только параметры из последнего вызова.

Входные аргументы

Примеры использования

• Добавление параметров в URL-адрес OneLink

AF('banners', 'updateParams', { deep_link_value: "new_param", deep_link_sub4: "gg_77", af_ad: "new_ad_param"});

hideBanner

Сигнатура метода

AF('banners', 'hideBanner');

Описание

Программно удаляет со страницы любой отображаемый баннер (например, после определенного ввода пользователя).

Входные аргументы

Ничего

Примеры использования

• Скрыть баннер

AF('banners', 'hideBanner');

Traits and Limitations