[Бета] Интеграция Web SDK от AppsFlyer

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Inject SDK
  var o = document.createElement("script"),
      p = document.getElementsByTagName("script")[0];
  o.async = 1;
  o.src = "https://websdk.appsflyersdk.com?" + "st=pba&af_id=WEB_DEV_KEY";
  p.parentNode.insertBefore(o, p);
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Inject SDK
  var o = document.createElement("script"),
      p = document.getElementsByTagName("script")[0];
  o.async = 1;
  o.src = "https://websdk.appsflyersdk.com?" + "st=pba,banners&af_id=WEB_DEV_KEY";
  p.parentNode.insertBefore(o, p);
  AF('banners', 'showBanner');
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["pba"]
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["banners", "pba"]
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

Повторите это на всех страницах:

1. В сниппете из Шага 2 замените WEB_DEV_KEY на ваш ID Web SDK (и YOUR_BANNER_KEY, если применимо).
2. Вставьте сниппет ближе к началу тега вашего сайта.

Убедитесь, что SDK загружается лишь один раз за каждую загрузку страницы и настройте его так, чтобы он запускался сразу после загрузки страницы, используя приоритизацию в Google Tag Manager.

1. Открыть Google Tag Manager.
2. Создать новый тег для веб-SDK AppsFlyer.
3. Выберите тип тега Пользовательский HTML.
4. Присвойте тегу понятное название.
5. Вставьте сниппет из Шага 2 в Конфигурации тега.
6. Нажмите Сохранить.
7. Добавьте триггер:
   • Для всех страниц:
     1. Нажмите Добавить триггер.
     2. Выберите Все страницы.
     3. Нажмите Сохранить.
     4. Введите имя тега, затем нажмите Сохранить.
   • Для конкретных страниц:
     1. Нажмите Сохранить тег.
     2. В главном окне GTM выберите Триггеры. Нажмите Новый.
     3. Нажмите на значок карандаша.
     4. Выберите тип триггера Просмотр страницы.
     5. Выберите Просмотр нескольких страниц.
     6. Настройте страницу и условия триггера по мере необходимости.
     7. Нажмите Сохранить.
     8. Свяжите триггер с тегом веб-SDK AppsFlyer.
        1. В главном окне GTM выберите Теги.
        2. Выберите тег, который вы создали ранее.
        3. В панели триггеров нажмите на иконку карандаша.
        4. Выберите триггер просмотра страницы, который вы создали ранее.
        5. Нажмите Сохранить.

Создание свойства в Adobe Experience Cloud

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

Добавьте сниппет в свойство Adobe Launch

1. На странице Свойства сайта выберите вкладку Правила .
2. Дайте правилу название. Рекомендуется: Загрузите веб-SDK.
3. В разделе ЕСЛИ под пунктом СОБЫТИЯ нажмите Добавить.
   • В разделе Тип события выберите Основное, с поддержкой DOM.
   • Нажмите Сохранить изменения.
4. В разделе ТОГДА в пункте Действия нажмите Добавить.
   • В разделе Тип действия выберите Пользовательский код.
   • Выберите JavaScript > Открыть редактор и вставьте сниппет из Шага 2 (без строк-оберток).
   • Нажмите Сохранить изменения, чтобы закрыть редактор кода.
5. Нажмите Сохранить.

Добавьте тег Adobe Launch на сайт

1. На странице Свойства сайта выберите вкладку Среды.
2. Найдите строку со средой, которую вы хотите опубликовать (разработка или рабочая).
3. В колонке Установка нажмите на иконку коробки в соответствующей строке.
4. В диалоговом окне Инструкции по установке на веб-сайте скопируйте фрагмент кода скрипта и закройте диалоговое окно.
5. Вставьте фрагмент кода в раздел <head> сайта.

Опубликуйте окружение Adobe Launch

1. На странице Мой веб-ресурсвыберите вкладку Публикация .
2. В разделе Разработка нажмите Добавить новую библиотеку.
   • Назовите библиотеку и выберите среду.
   • В пункте Изменения ресурсов нажмите Добавить ресурс.
   • Нажмите Правила  > Загрузить веб-SDK > Последние > Выбрать и создать новую редакцию .
   • Нажмите Сохранить.
3. В разделе Разработка:
   • Рядом с только что созданной библиотекой откройте меню действий (3 точки) и выберите Создать сборку для разработки.
   • Снова откройте меню действий и выберите опцию Отправить на утверждение.
4. В разделе Отправленные:
   • Откройте меню действий и выберите опцию Собрать для стейджинга.
   • Снова откройте меню действий и выберите опцию Утвердить для публикации.
5. В разделе Утвержденные:
   • Откройте меню действий выберите опцию Собрать и выложить в продакшн.

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

Пример события (событие покупки с сопутствующим доходом)

AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});

Это стандартный подход для конверсий, которые заканчиваются перенаправлением, например, на странице Спасибо или подтверждения.

Вы можете реализовать этот триггер, добавив метод загрузки окна в ваш нативный JavaScript или настроив триггер просмотра страницы в Google Tag Manager.

window.onload = function(){
  AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category': 'holiday_promotion'}, eventName: 'subscription'});
}

<html>
<head>
    <script>
        // Google Tag Manager loads the Web SDK
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXX');
    </script>
    <script>
        function getResponseFromServer() {
            return JSON.stringify({ action: 'subscribe', category: 'site actions', label: userEmail })
        }
        localStorage.setItem('data', JSON.stringify({ action: 'subscribe', category: 'site actions', label: 'user@email.com' }));
    </script>
</head>
<body>
    <h1>Thank You for Subscribing to Our Newsletter</h1>
</body>
</html>

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

Обычно такие взаимодействия обрабатываются либо привязкой обработчика клика к нативному элементу HTML, либо с помощью переменных Google Tag Manager для идентификации и измерения конкретных идентификаторов элементов или CSS селекторов.

<html>
<head>
    <script>
        window.onload = function () {
            document.getElementById('checkout').addEventListener('click', function () {
                AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'});
            });
        }
    </script>
</head>
<body>
    <h1>Shopping Cart</h1>
    <button id='checkout'>Checkout</button>
</body>
</html>

<html>
<head>
    <script>
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXX');
    </script>
</head>
<body>
    <h1>Shopping Cart</h1>
    <button id='checkout'>Checkout</button>
</body>
</html>

Чтобы обеспечить точность данных и успешную передачу, учитывайте следующие технические требования:

• Порядок загрузки: Убедитесь, что тег функций Web SDK полностью загружен в области страницы до выполнения любых вызовов событий.
• Форматирование данных: Не включайте специальные символы в значения событий. Например, используйте числовые значения для дохода, а не включайте символы валюты (используйте 10.50 вместо $10.50).
• Ограничения строк: Делайте event_value строки лаконичными; значения длиннее 4000 символов будут обрезаны.

Приведенный в этих примерах код предназначен только для ознакомления. Не используйте этот код в таком виде. Если вы не знаете, как использовать этот код, проконсультируйтесь со своим веб-разработчиком. 

Предположение: Web SDK загружается на странице перед отправкой события; не загружайте его снова.

Сценарий пользователя:

• Пользователь регистрируется на вашем сайте.
• Код сайта собирает данные пользователя и отправляет их на ваш сервер.
• Сервер генерирует уникальный CUID для пользователя.
• На странице «Спасибо» после регистрации вы запрашиваете у сервера новый CUID.
• Используя ответ сервера, вы устанавливаете CUID AppsFlyer с помощью метода Web SDK setCustomerUserId().

Пример формы регистрации

Код ниже представляет собой простую форму регистрации. При отправке формы адрес электронной почты сохраняется в localStorage. Когда пользователь переходит на страницу «Спасибо», адрес электронной почты пользователя отправляется на сервер для получения уникального CUID для этого адреса.

<html>
<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.appsflyersdk.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",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        function storeUserEmail() {
            var userEmail = document.getElementById('email').value;
            localStorage.setItem('user_email', userEmail);
        }
    </script>
</head>
<body>
    <h1>Sign Up</h1>
    <form onsubmit="storeUserEmail()" action="/signup" method="post">
        <div><label>Name</label><input type="text" name="name" id="name"></div>
        <br/>
        <div><label>Email</label><input type="email" name="email" id="email"></div>
        <br/>
        <input type="submit" id="submit">
    </form>
</body>
</html>

Пример страницы благодарности

Код использует Fetch API. Он отправляет серверу адрес электронной почты, введенный пользователем. Предположим, что сервер создаёт пользователя с уникальным CUID во время регистрации; при отправке на сервер адреса электронной почты он возвращает этот уникальный CUID. Сервер отвечает уникальным CUID, и этот уникальный CUID является значением, передаваемым с помощью методаsetCustomerUserId.

<html>
<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.appsflyersdk.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",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        window.onload = function () {
            var userEmail = localStorage.getItem('user_email');
            fetch('users/' + userEmail).then(function (res) {
                res.text().then(function (id) {
                    console.log(id);
                    AF('pba', 'setCustomerUserId', id);
                });
            });
        }
    </script>
</head>
<body>
    <h1>Thank You for Signing Up!</h1>
</body>
</html>

1. Настройка страницы регистрации.

   Пример кода ниже представляет собой простую форму регистрации. При отправке формы адрес электронной почты сохраняется в localStorage. Когда пользователь переходит на страницу «Спасибо», адрес электронной почты пользователя отправляется на сервер для получения уникального CUID для этого адреса.

   <html>
   <head>
       <script>
           (function (w, d, s, l, i) {
               w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
               var f = d.getElementsByTagName(s)[0], j = d.createElement(s),
                   dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true;
               j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
               f.parentNode.insertBefore(j, f);
           })(window, document, 'script', 'dataLayer', 'GTM-5VJ6C7R');
           function storeUserEmail() {
               var userEmail = document.getElementById('email').value;
               localStorage.setItem('user_email', userEmail);
           }
       </script>
   </head>
   <body>
       <h1>Sign Up</h1>
       <form onsubmit="storeUserEmail()" action="/signup" method="post">
           <div><label>Name</label><input type="text" name="name" id="name"></div>
           <br />
           <div><label>Email</label><input type="email" name="email" id="email"></div>
           <br />
           <input type="submit" id="submit">
       </form>
   </body>
   </html>

2. Настройте страницу благодарности для пользователей, которые регистрируются: Код ниже представляет собой страницу благодарности с триггером GTM, который отправляет серверу адрес электронной почты, предоставленный пользователем в форме регистрации. Предположим, что при регистрации сервер создаёт пользователя с уникальным CUID; при отправке на сервер адреса электронной почты он возвращает этот уникальный CUID. Сервер отвечает уникальным CUID, который отправляется с помощью метода setCustomerUserId().

   <script>
       window.onload = function () {
           var userEmail = localStorage.getItem('user_email');
           fetch('users/' + userEmail).then(function (res) {
               res.text().then(function (id) {
                   console.log(id);
                   AF('pba', 'setCustomerUserId', id);
               });
           });
       }
   </script>

3. Добавьте новый тег для атрибуции подписок после загрузки страницы благодарности.

   

4. Дайте тегу отдельное имя и выберите тип тега Custom HTML.

   

   <script>
       var userEmail = localStorage.getItem('user_email');
       fetch('users/' + userEmail).then(function (res) {
           res.text().then(function (id) {
               console.log(id);
               AF('pba', 'setCustomerUserId', id);
           });
       });
   </script>

5. Разверните Расширенные настройки и затем Последовательность тегов под текстовой областью и убедитесь, что конверсия настроена на срабатывание после выполнения тега.

   

6. Установите триггер для тега конверсии, чтобы указать, когда тег конверсии должен срабатывать (в приведенном ниже примере он срабатывает при загрузке страницы благодарности).

   

Вы можете контролировать измерение двумя способами:

Настройка начального состояния SDK (в сниппете)

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

• Отправить события: {pba: {webAppId: "...", measurementStatus:true}}
• Не отправлять события: {pba: {webAppId: "...", measurementStatus:false}}

Явный контроль

Явный контроль имеет приоритет над начальной настройкой состояния и использует постоянные собственные файлы cookie:

• Устанавливается на домене сайта.
• Истекает через период, установленный Web SDK или браузером.
• Всегда зависит от настроек файлов cookie в браузере.

Команды

• Начать отправлять события (согласие): window.AF_SDK.PLUGINS.PBA.enableMeasurement()
• Прекратить отправлять события (отказ): window.AF_SDK.PLUGINS.PBA.disableMeasurement()

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

Политика безопасности контента (CSP)

Если ваш веб-сайт требует, чтобы JavaScript был защищен CSP, Web SDK поддерживает два подхода в зависимости от вашей конфигурации CSP и фрагмента, который вы выбрали на шаге 2.

• CSP с использованием 'self': Добавьте https://websdk.appsflyersdk.com в ваш script-src белый список. Это работает как для стандартного Web SDK, так и для расширенной проверки SDK.
• CSP с использованием nonce: Если ваша политика использует script-src 'nonce-...', используйте вариант расширенной проверки SDK с nonce ниже. Это передает nonce всем трем тегам скриптов, которые требуются для процесса проверки. Замените {{CSP_NONCE}} на сгенерированное сервером (для каждого запроса) значение nonce.

Таблица ниже показывает, какие политики CSP совместимы с вариантом с расширенным nonce.

Расширенная проверка SDK с фрагментами CSP nonce

<script nonce="{{CSP_NONCE}}">
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config — nonce forwarded to the injected SDK <script> tag
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["pba"],
    nonce: "{{CSP_NONCE}}"
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.nonce = "{{CSP_NONCE}}";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

<script nonce="{{CSP_NONCE}}">
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config — nonce forwarded to the injected SDK <script> tag
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["banners", "pba"],
    nonce: "{{CSP_NONCE}}"
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.nonce = "{{CSP_NONCE}}";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

Отбрасывать параметры запроса

Если ваши параметры запроса URL содержат конфиденциальную информацию, укажите AppsFlyer отбрасывать их (URL, рефереры и header_referer).

• Отбрасывать все параметры запроса: добавьте af_url=true
• Отбрасывать конкретные параметры: используйте af_url_mask=param (разделяйте несколько параметров с помощью ;)

Пример:

• Оригинал: param1=value1&param2=value2&param3=value3&af_url_mask=param2;param3
• Результат:param1=value1&af_url_mask=param2;param3