Смарт-баннер 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.
-
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>
- Paste the code snippet in the
head
на сайте. Он должен располагаться ближе к началу тегаhead
.
Примечание
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');
Traits and Limitations
Специфика | Примечания |
---|---|
Single page application (SPA) | Smart Banners are by default only displayed once, even if users navigate between pages. To display banners when users navigate between pages, you need to manually call hideBanner and showBanner for every navigation that doesn't reload the page and trigger the Smart Banners default logic. |
Изменения сохранены 7 месяцев назад