Смарт-баннер v2
Обзор
AppsFlyer предоставляет SDK для смарт-баннеров, который рекламодатели могут интегрировать в свои сайты. Назначение SDK — получать все необходимые данные для динамического отображения смарт-баннеров. SDK для смарт-баннеров также автоматически создает корректные ссылки атрибуции, чтобы вам не приходилось создавать их вручную.
Поэтому SDK для смарт-баннеров должен быть доступен со всех страниц, на которых отображаются ваши мобильные баннеры.
SDK для смарт-баннеров выполняет аутентификацию с помощью уникального веб-ключа, который можно получить в рабочей области сайта.
Установка
Smart banners only
- Вместо заполнителя YOUR_WEB_KEY укажите в скрипте свой веб-ключ. Этот веб-ключ формируется при создании новой рабочей области сайта.
- Вставьте следующий фрагмент кода в тег
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
- 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.
- Вместо заполнителя YOUR_PBA_KEY укажите в скрипте свой веб-ключ разработчика. Этот веб-ключ формируется при создании пакета брендов.
- Вставьте этот фрагмент кода в тег 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
для загрузки мобильного приложения.
Входные аргументы
Тип | Имя | Описание |
---|---|---|
String | bannerContainerQuery | Если параметр передан, SDK пытается найти элемент на странице с помощью этого запроса и считает его начальной точкой для размещения баннера. В противном случае используется document.body . |
Integer | bannerZIndex | Для смарт-баннеров по умолчанию задается максимальное значение z-index, чтобы их не перекрывали другие элементы сайта. Это можно изменить, если вы хотите, чтобы некоторые компоненты сайта отображались поверх баннера. |
<Key, Value Dictionary> | additionalParams | Если передается, эти ключи и значения (например, deep_link_value: apples ) добавляются как параметры запроса в URL-адрес OneLink. |
Примеры использования
- Добавление параметров в 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-адресу добавляются только параметры из последнего вызова.
Входные аргументы
Тип | Имя | Описание |
---|---|---|
<Key, Value Dictionary> | N/A | Эти ключи и значения (например, deep_link_value: apples ) добавляются как параметры запроса в URL-адрес OneLink. |
Примеры использования
- Добавление параметров в 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');
Изменения сохранены 4 месяца назад