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

Обзор

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

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

Установка

Smart banners only

1. Вместо заполнителя YOUR_WEB_KEY укажите в скрипте свой веб-ключ. Этот веб-ключ формируется при создании новой рабочей области сайта.
2. Вставьте следующий фрагмент кода в тег 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","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>

ℹ️

Примечание

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');