Внедрение кода смарт-баннеров на сайт (для маркетологов)

Для:
маркетологов маркетологов разработчиков
Последнее обновление:

Краткий обзор. Добавьте код смарт-баннеров на свой сайт, чтобы конвертировать посетителей вашего сайта в пользователей мобильного приложения.

 Примечание

Веб SDK AppsFlyer для смарт-баннеров v1 устарел с 8 ноября 2023 года. Для показа смарт-баннеров на вашем сайте необходимо обновить версию до v2. Узнать больше

Внедрение кода веб-сайта

Эта статья предназначена для маркетологов, которые хотят внедрить код смарт-баннеров на свой сайт при помощи одного из следующих инструментов:

  • Google Tag Manager (GTM)
  • Adobe Launch Tag Manager
  • Shopify
  • Wix
  • Squarespace
  • WordPress

Как добавить код на свой сайт через другие платформы или внести изменения в код в зависимости от задачи (например, чтобы добавить параметры, настроить диплинкинг, скрыть баннер или интегрировать PBA со смарт-баннерами, читайте в статье Внедрение кода смарт-баннеров на сайт (для разработчиков).

Чтобы внедрить код смарт-баннеров на свой сайт:

  1. Чтобы получить код смарт-баннеров, следуйте инструкциям на веб-сайте.
  2. Чтобы внедрить код на свой веб-сайт, используйте следующие инструкции для конкретной платформы:

Google Tag Manager

Чтобы внедрить код через Google Tag Manager:

  1. В GTM создайте новый тег.
  2. Присвойте тегу имя, нажмите Tag Configuration (Конфигурация тега) и выберите Custom HTML (Пользовательский HTML).
  3. Вставьте фрагмент кода смарт-баннера в поле HTML. Во фрагменте кода вместо YOUR-BANNER-KEY укажите фактический ключ баннера.
  4. Выберите Triggering (Запуск) и создайте новый триггер, нажав значок с плюсом в правом верхнем углу экрана.
  5. Присвойте триггеру имя, нажмите Trigger Configuration (Конфигурация триггера) и выберите Page View (Просмотр страницы).
  6. Если нужно, чтобы баннер показывался на всех страницах, выберите All Page Views (Все просмотры страниц). Если нужно, чтобы баннер показывался на определенных страницах, выберите Some Page Views (Некоторые просмотры страниц) и определите условие срабатывания тэга. Более подробные сведения о триггерах можно найти в документации GTM.
  7. Нажмите Save (Сохранить) в правом верхнем углу.
  8. Вернитесь на экран настройки тэга. Проверьте, все ли готово, и нажмите Save (Сохранить) в правом верхнем углу.
  9. Опубликуйте свой контейнер GTM. 

Adobe Launch Tag Manager

Чтобы внедрить код через Adobe Launch Tag Manager:

Шаг 1: Создание свойства в Adobe Experience Cloud

Чтобы создать свойство (тег), в котором будет размещен код смарт-баннеров:

  1. Перейдите в раздел Adobe Experience Cloud > Launch (Запуск).
  2. В разделе Adobe Experience Cloud Launch (Запуск Adobe Experience Cloud) нажмите Go to Launch (Перейти к запуску).
  3. Нажмите New Property (Новое свойство).
  4. Дайте свойству название.
  5. В разделе Platform (Платформа) выберите Web (Веб-сайт).
  6. Укажите домен своего сайта.
  7. Нажмите Сохранить.

Шаг 2: Добавьте код смарт-баннеров в свойство Adobe Launch

Чтобы добавить код смарт-баннеров в тег:

  1. На странице My web property (Мой веб-ресурс) выберите вкладку Rules (Правила).
  2. Дайте правилу название. Рекомендуется: Смарт-баннеры AppsFlyer.
  3. В разделе If (Если) под пунктом EVENTS (События) нажмите +Add (Добавить).
    • В разделе Event Type (Тип события) выберите Core - DOM Ready (Основное, с поддержкой DOM).
    • Нажмите Keep Changes (Сохранить изменения).
  4. В разделе Then (Тогда) в пункте Actions (Действия) нажмите +Add (Добавить).
    • В разделе Action Type (Тип действия) > Custom Code (Пользовательский код).
    • Выберите JavaScript > Open Editor (Открыть редактор) и вставьте фрагмент кода SDK для смарт-баннеров без тэгов <script>.
    • Нажмите Keep Changes (Сохранить изменения), чтобы закрыть Редактор кода.
  5. Нажмите Сохранить.

Шаг 3: Добавьте тег Adobe Launch на свой сайт.

Чтобы добавить тег Adobe Launch на свой веб-сайт (который загружает код смарт-баннеров):

  1. На странице My web property (Мой веб-ресурс) выберите вкладку Environments (Среды).
  2. Найдите строку со средой, которую вы хотите опубликовать (разработка или рабочая).
    • В столбце Install (Установить) щелкните значок коробки в нужной строке; как правило, выбирают строку, соответствующую производственной среде.
    • См. раздел о публикации среды для запуска Adobe.
  3. В диалоговом окне Web Install Instructions (Инструкция по установке через интернет):  
    • Скопируйте фрагмент кода скрипта.
    • Закройте диалоговое окно.
  4. Вставьте этот фрагмент кода в тег <head> сайта.

Шаг 4: Публикация среды Adobe Launch 

Опубликуйте среду, чтобы активировать тег Adobe Launch.

  1. На странице My web property (Мой веб-ресурс) выберите вкладку Publishing (Публикация).
  2. В разделе Development (Разработка) щелкните Add New Library (Добавить новую библиотеку).
    1. Назовите библиотеку и выберите среду. 
    2. В пункте Resource Changes (Изменения ресурсов) нажмите Add a Resource (Добавить ресурс).
    3. Нажмите Rules (Правила) > Load Smart Banners (Загрузить смарт-баннеры) > Latest (Последние) > Select & Create a New Revision (Выбрать и создать новую редакцию).
    4. Нажмите Сохранить.
  3. В разделе Development (Разработка):
    1. Рядом с только что созданной библиотекой откройте меню действий (3 точки) и выберите Build for Development (Создать сборку для разработки).
    2. Снова откройте меню действий и выберите опцию Submit for Approval (Отправить на утверждение).
  4. В разделе Submitted (Отправленные):
    1. Откройте меню действий и выберите опцию Build for Staging (Создать сборку для стейджинга).
    2. Снова откройте меню действий и выберите опцию Approve for Publishing (Утвердить для публикации).
  5. В разделе Approved (Утвержденные) откройте меню действий выберите опцию «Build & Publish to Production» (Создать сборку и опубликовать в производственной среде).
    Процесс завершен.

Теперь при загрузке вашего сайта на мобильном устройстве будет отображаться активный креатив баннера. Чтобы настроить отображение баннера только на определенных страницах или в соответствии с действиями пользователей, см. правила Adobe Launch.

Shopify

Чтобы внедрить код на ваш сайт Shopify:

  1. На дэшборде Shopify перейдите в раздел Sales Channels (Каналы продаж) > Online Store (Онлайн-магазин) > Themes (Темы).
    Отобразится ваша текущая тема.
  2. Нажмите Actions (Действия) > Edit code (Редактировать код).
    Откроется страница редактирования кода вашей темы.
  3. В папке Layout (Макет) выберите файл, имя которого начинается с {/} theme.
    Отобразится код веб-страницы.
  4. В коде, непосредственно под заголовком <head>, вставьте код смарт-баннеров. 

Wix

Чтобы внедрить код на ваш сайт Wix:

  1. На дэшборде Wix нажмите Settings (Настройки).
  2. В разделе Advanced (Расширенные) страницы Settings (Настройки) нажмите Custom code (Пользовательский код).
  3. Нажмите + Add Custom Code (Добавить пользовательский код).
  4. В полеPaste the code snippet here (Вставьте здесь фрагмент кода) вставьте код смарт-баннеров.
  5. В поле Name (Имя) введите имя вашего кода. Рекомендуется: Смарт-баннеры AppsFlyer.
  6. В разделе Add Code to Pages (Добавить код на страницы) выберите, где будут отображаться ваши баннеры. Одно из следующего:
    • Все страницы
    • Выберите определенные страницы
  7. Нажмите Применить.
    Теперь на странице пользовательского кода должен отображаться ваш код. Убедитесь, что он находится в разделе Head (Заголовок).

Squarespace

Чтобы внедрить код на ваш сайт Squarespace:

  1. На дэшборде Squarespace нажмите Website (Веб-сайт).
  2. Нажмите Settings (Настройки).
  3. Нажмите Advanced (Расширенные).
  4. Нажмите Code Injection (Внедрение кода).
  5. В разделе Header (Заголовок) вставьте код смарт-баннеров.
  6. Нажмите Save (Сохранить).

WordPress

Чтобы внедрить код на ваш сайт WordPress:

  1. На дэшборде WordPress нажмите Appearance (Вид) > Theme Editor (Редактор тем).
    Откроется страница редактирования темы и отобразится CSS-код вашего сайта.
  2. В разделе Theme Files (Файлы темы) нажмите Theme Header (header.php) (Заголовок темы).
  3. В отобразившемся коде под <head>вставьте код смарт-баннеров.
  4. Нажмите Update File (Обновить файл).

См. также