Краткий обзор. Интегрируйте AppsFlyer в сайты с помощью веб-SDK для учета и измерения посещений, событий, конверсий и доходов.
Руководство пользователя и по интеграции веб-SDK
- Тег JavaScript для веб-SDK:
- является частью решения People-Based Attribution (PBA) для анализа путей пользователей на нескольких платформах.
- сообщает платформе AppsFlyer о посещениях и действиях пользователей на вашем сайте.
- является плагином для веб-сайта, который не требует программирования. Он не зависит от операционной системы и браузера посетителя веб-сайта.
- Размер: 40-60Кб.
- Внедрите веб-SDK вместе с мобильным SDK AppsFlyer для регистрации и отображения активности пользователей в мобильных приложениях и веб-средах.
- События, происходящие за пределами веб-сайта, могут быть записаны с помощью API межсерверных событий (веб-S2S)
Интеграция веб-SDK в сайт
Установка и интеграция
Соображения и необходимые действия
Чек-лист по интеграции |
---|
Чтобы обеспечить учет посещений и событий, на всех страницах сайта должен быть установлен веб-SDK. |
Разместите фрагмент кода так, чтобы он загружался как можно раньше на странице. Для этого разместите код в верхней части тега head. |
Если вы интегрируете SDK с помощью Google Менеджера тегов (GTM):
|
Вы можете реализовать веб-SDK как со смарт-баннерами, так и без них. Следуйте соответствующим инструкциям в следующих разделах. |
Обязательные требования к интеграции
Проверьте интеграцию с помощью инструмента тестирования |
Прежде чем начать:
- Уточните у маркетолога, что он создал пакет бренда.
- Дополнительные указания см. в руководстве по интеграции PBA.
- Обратите внимание: Если у вас уже есть отдельный веб-SDK для смарт-баннеров, удалите его и замените на веб-SDK как для смарт-баннеров, так и для атрибуции People-based; не добавляйте отдельный веб-SDK для PBA.
Выполните следующие действия:
- Получите веб-ключ разработчика для веб-SDK. Внимание! Это не тот же ключ, который используется мобильными приложениями.
-
Чтобы получить веб-ключ разработчика:
- В AppsFlyer в верхнем меню выберите вкладку Мои приложения.
- Нажмите Просмотреть пакет бренда.
- Скопируйте необходимый веб-ключ разработчика. (WEB_DEV_KEY)
-
Чтобы получить веб-ключ разработчика:
- Если вы используете смарт-баннеры, получите ключ смарт-баннера.
-
Чтобы получить ключ смарт-баннера:
- В AppsFlyer в боковом меню перейдите в раздел Вовлечение > Web to App > Смарт-баннеры.
- Скопируйте необходимый ключ смарт-баннеров.
-
Чтобы получить ключ смарт-баннера:
- Разрешения на добавление скриптов в теги head на сайте.
- Если вы используете Google Менеджер тегов, он должен быть интегрирован в сайт.
Перейдите к интеграции веб-SDK с помощью одного из следующих вариантов.
Фрагмент кода JavaScript
Интегрируйте веб-пакет SDK одним из следующих способов.
Чтобы установить веб-SDK без смарт-баннеров:
- Повторите следующую процедуру на всех страницах вашего сайта.
- В следующем фрагменте кода замените
WEB_DEV_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",{pba: {webAppId: "WEB_DEV_KEY"}})
</script>
Чтобы внедрить веб-SDK со смарт-баннерами:
- Повторите следующую процедуру на всех страницах вашего сайта.
- В приведенном ниже фрагменте кода замените
WEB_DEV_KEY
иYOUR_BANNER_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: "WEB_DEV_KEY"}, banners: {key: "YOUR_BANNER_KEY"}});
AF('banners', 'showBanner');
</script>
Чтобы внедрить веб-SDK с помощью Google Менеджера тегов (GTM):
- Перейдите в Google Менеджер тегов.
- Создайте новый тег для веб-SDK AppsFlyer.
- Выберите тип тега Custom HTML.
- Присвойте тегу понятное имя.
- Выполните одно из следующих действий:
- Если вы интегрируете веб-SDK без смарт-баннеров:
- Вставьте следующий фрагмент кода в окно конфигурации тегов.
- Во фрагменте кода замените
WEB_DEV_KEY
на ключ, указанный в необходимых условиях.
<!-- AppsFlyer web SDK --> <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",{pba: {webAppId: "WEB_DEV_KEY"}}) </script>
- Если вы интегрируете веб-SDK со смарт-баннерами:
- Вставьте следующий фрагмент кода в окно конфигурации тегов.
- Во фрагменте кода замените
WEB_DEV_KEY
иYOUR_BANNER_KEY
на ключи, указанные в необходимых условиях.
<!-- AppsFlyer web SDK -->
<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: "WEB_DEV_KEY"}, banners: {key: "YOUR_BANNER_KEY"}}); AF('banners', 'showBanner'); </script>
- Если вы интегрируете веб-SDK без смарт-баннеров:
- Нажмите Сохранить.
- Выполните одно из следующих действий:
- Чтобы добавить триггер на все страницы:
-
Чтобы добавить триггер на определенные страницы:
- Создание свойства в Adobe Experience Cloud
- Добавление веб-SDK в свойство Adobe Launch
- Добавление тега Adobe Launch на сайт
- Публикация среды Adobe Launch
Создание свойства в Adobe Experience Cloud
- Перейдите в раздел Adobe Experience Cloud > Launch (Запуск).
- В разделе Adobe Experience Cloud Launch (Запуск Adobe Experience Cloud) нажмите Go to Launch (Перейти к запуску).
- Нажмите New Property (Новое свойство).
- Присвойте свойству имя.
- В разделе Platform (Платформа) выберите Web (Веб-сайт).
- Укажите домен своего сайта.
- Нажмите Сохранить.
Добавление веб-SDK в свойство Adobe Launch
- На странице My web property (Мой веб-ресурс) выберите вкладку Rules (Правила).
- Дайте правилу название. Рекомендуется использовать Загрузить веб-SDK.
- В разделе IF (Если) под пунктом EVENTS (События) нажмите +Add (Добавить).
- В разделе Event Type (Тип события) выберите Core - DOM Ready (Основное, с поддержкой DOM).
- Нажмите Keep Changes (Сохранить изменения).
- В разделе THEN (Тогда) в пункте Actions (Действия) нажмите +Add (Добавить).
- В разделе Action Type (Тип действия) > Custom Code (Пользовательский код).
- Выберите JavaScript > Open Editor (Открыть редактор) и вставьте фрагмент кода веб-SDK без тегов <script>.
- Нажмите Keep Changes (Сохранить изменения), чтобы закрыть Редактор кода.
- Нажмите Сохранить.
Добавление тега Adobe Launch на сайт
- На странице My web property (Мой веб-ресурс) выберите вкладку Environments (Среды).
- Найдите строку со средой, которую вы хотите опубликовать (разработка или рабочая).
- В столбце INSTALL (Установить) щелкните значок коробки в нужной строке; как правило, выбирают строку, соответствующую производственной среде.
- См. раздел о публикации среды для запуска Adobe.
- В диалоговом окне Web Install Instructions (Инструкция по установке через интернет):
- Скопируйте фрагмент кода скрипта.
- Закройте диалоговое окно.
- Вставьте этот фрагмент кода в тег <head> сайта.
Публикация среды Adobe Launch
- На странице My web property (Мой веб-ресурс) выберите вкладку Publishing (Публикация).
- В разделе Development (Разработка) щелкните Add New Library (Добавить новую библиотеку).
- Назовите библиотеку и выберите среду.
- В пункте RESOURCE CHANGES (Изменения ресурсов) нажмите Add a Resource (Добавить ресурс).
- Нажмите Rules (Правила) > Load web SDK (Загрузить веб-SDK) > Latest (Последние) > Select & Create a New Revision (Выбрать и создать новую редакцию).
- Нажмите Сохранить.
- В разделе Development (Разработка):
- Рядом с только что созданной библиотекой откройте меню действий (3 точки) и выберите Build for Development (Создать сборку для разработки).
- Снова откройте меню действий и выберите опцию Submit for Approval (Отправить на утверждение).
- В разделе Submitted (Отправленные):
- Откройте меню действий и выберите опцию Build for Staging (Создать сборку для стейджинга).
- Снова откройте меню действий и выберите опцию Approve for Publishing (Утвердить для публикации).
- В разделе Approved (Утвержденные):
- Откройте меню действий выберите опцию Build & Publish to Production (Создать сборку и опубликовать в производственной среде).
- Процесс завершен.
Когда сайт загружается на мобильном устройстве, активный креатив отображается в баннере. Как отображать баннер на определенных страницах или в соответствии с действиями пользователя, см. в разделе Правила Adobe Launch.
Убедитесь, что пакет SDK работает
После установки проверьте, что веб-SDK AppsFlyer вызывается браузером посетителя и что сообщения отправляются. Это делается путем проверки сообщения о сетевом соединении, о котором сообщается в браузере.
Чтобы убедиться, что пакет SDK загружается и работает:
- Перейдите на сайт.
- Откройте инструменты разработчика в браузере.
- Перейдите на вкладку (A) Сеть.
- Обновите страницу.
- Отфильтруйте по (B) wa.appsflyer.
- Выберите (C) сообщение о событиях.
- На вкладке Headers (D):
- URL-адрес запроса — wa.appsflyer.com/events.
- site_id query parameter=
WEB_DEV_KEY
. - (E) код статуса 200.
- Убедитесь, что значение site_id равно значению
WEB_DEV_KEY
в настройках пакета бренда:- В AppsFlyer в боковом меню выберите Настройки > Пакеты бренда.
- Нажмите на веб-ключ разработчика, чтобы скопировать его.
- Вставьте ключ в любое место (новая вкладка браузера, блокнот), чтобы отобразить ключ.
- Убедитесь, что site_id и
WEB_DEV_KEY
совпадают.
- Убедитесь, что пакет SDK загружается только один раз. Многократная загрузка SDK может привести к тому, что SDK перестанет работать.
Согласие на отправку событий
Веб-SDK отправляет данные о событиях посетителей в AppsFlyer. Вы можете управлять, останавливать или запускать отправку событий, как описано в этом разделе.
Обратите внимание:
- Настройка начального состояния SDK: Определяет, отправляет ли SDK события при первоначальной загрузке страницы или должен ждать, пока вы не дадите явную команду, чтобы начать отправку событий. Настройка содержится в веб-фрагменте.
-
Явный контроль: Используется, чтобы остановить или начать отправку событий. Например, если вы реализуете баннеры согласия/отказа предоставления данных (также известные как баннеры согласия на использование файлов cookie), интегрируйте явные команды в элементы управления баннером, чтобы запускать и останавливать отправку событий. Явный контроль имеет приоритет над настройкой начального состояния SDK и использует постоянные файлы cookie первой стороны со следующими характеристиками:
- Устанавливается на домене сайта.
- Срок действия истекает по истечении периода, установленного веб-SDK или определенного браузером. После истечения срока действия файлов cookie веб-SDK возвращается к исходному состоянию.
- Cookie для веб-SDK не вмешиваются в настройки cookie конкретного браузера и всегда подчиняются им.
Настройка начального состояния SDK
Параметр | Фрагмент кода обязателен |
---|---|
[По умолчанию] Отправлять события |
Внесите следующие изменения во фрагмент кода веб-SDK. При необходимости добавьте параметр measurementStatus: Установите measurementStatus=true
|
Не отправлять события
|
Внесите следующие изменения во фрагмент кода веб-SDK. При необходимости добавьте параметр measurementStatus: Установите measurementStatus=false |
Явный контроль
Вариант | Команда |
---|---|
Начать отправлять события (согласие) | window.AF_SDK.PLUGINS.PBA.enableMeasurement() |
Прекратить отправлять события (отказ) | window.AF_SDK.PLUGINS.PBA.disableMeasurement() |
Реализация политики безопасности контента (CSP)
Некоторые веб-мастера требуют, чтобы Javascript был защищен их CSP. Для этого можно использовать различные механизмы CSP, включая любой из следующих:
- CSP с использованием self
- CSP с использованием nonce: Добавьте команду nonce к тегу скрипта, используя случайное значение nonce, сгенерированное вами.
<script nonce="random value generated by you"> !function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){ .... </script>
Сброс параметров запроса
Если параметры запроса содержат данные, которые AppsFlyer не должен для вас регистрировать, вы можете указать платформе AppsFlyer отбрасывать некоторые или все параметры запроса. В таком случае они недоступны ни в сырых данных, ни в отчетах.
Вы можете реализовать описанные методы в отношении url, рефереров и header_referer.
Параметры сброса запросов
Метод | Описание |
---|---|
Сброс всех параметров запроса | Добавьте af_url=true к url |
Сброс определенных параметров запроса |
Задавая маску параметров запроса, вы указываете, какие параметры будут отброшены. Установите маску сброса с помощью Пример: Url с маской:
Url после сброса параметров:
|
Принципы записи событий
Конверсии и стандартные события
- Пользовательские события записываются SDK, который отправляет событие на платформу AppsFlyer.
- Используя список событий конверсии, заданный маркетологом, AppsFlyer разбивает события на стандартные и события конверсии.
- Данные о событиях конверсии доступны на дэшбордах PBA.
- Данные о конверсиях и стандартных событиях доступны в отчетах по сырым данным.
События конверсии
- События конверсии дают представление о ваших маркетинговых и бизнес-усилиях. К событиям конверсии относятся покупки, загрузки, регистрации и подписки.
- PBA атрибутирует события конверсии к медиа-источнику, который побудил пользователя посетить веб-сайт.
- Определив атрибутированный медиа-источник, вы можете измерить и дифференцировать качество пользователей, привлеченных разными медиа-источниками.
- События конверсии используются для учета дохода и расчета ROI.
- Используйте их для сравнения бюджета рекламы для конкретных медиа-источников с доходом, полученным от пользователей, которые приходят из этих медиа-источников.
Стандартные события
- Стандартные события используются для проверки пути пользователя и воронок, которые приводят к конверсиям.
- Используйте их для измерения активности пользователей и выделения медиа-источников, которые привлекают вовлеченных пользователей.
- Записывайте действия пользователей, чтобы помечать их для кампаний по повторному вовлечению.
Запись событий
Запускайте веб-SDK для записи событий при выполнении определенных условий, например, при загрузке целевой страницы или при взаимодействии пользователей с элементами сайта. Смотрите примеры записи событий.
Идентификация пользователей с помощью идентификатора клиента (CUID)
- Веб-пользователи идентифицируются в AppsFlyer с помощью уникального CUID, который вы им выделяете. Как правило, CUID управляется внутренними серверами.
- Используйте то же значение CUID, которое вы используете в мобильной среде. Это позволяет получить целостное представление об активности пользователей на нескольких платформах. Функция в мобильном SDK — это функция setCustomerUserId (iOS, Android, Unity).
-
Чтобы задать CUID в веб-SDK:
- Установите CUID в самой ранней точке, когда у вас есть к нему доступ. В большинстве случаев это означает, что вам нужно подождать, пока пользователь пройдет идентификацию через вход или регистрацию.
-
Запустите вызов JavaScript для setCustomerUserId(), как показано в следующем примере.
Внимание! Отправляйте CUID в виде строки, даже если это число. Сделайте это, заключив его в кавычки.
- Если вы реализуете веб-S2S, учтите, что вам может потребоваться уведомить PBA, когда вы связываете CUID с идентификатором веб-посетителя в вашем бэкенде.
- CUID не должны содержать персональную информацию, позволяющую установить личность, такую как номер телефона или адрес электронной почты.
// Associate all current user web events to distinct ID 663274
AF('pba', 'setCustomerUserId' , '663274')
Параметры событий веб-SDK
Имя параметра | Обязательно/Не обязательно | Описание |
---|---|---|
eventType | Да |
Тип события Формат: Строка Всегда заполняйте этот параметр значением EVENT. Пример: eventType: "EVENT" |
eventName | Да |
Имя события Формат: Строка Пример: Покупка, подписка |
Нет |
Этот параметр устарел и будет удален из системы в срок, который будет объявлен позднее. Вместо этого используйте параметр eventValue. |
|
|
Нет |
Этот параметр устарел и будет удален из системы в срок, который будет объявлен позднее. Вместо этого используйте параметр eventValue. |
eventRevenue | Нет |
Доход, присвоенный событию конверсии Формат: Переменное число |
eventRevenueCurrency | Нет |
Валюта дохода
Формат: Строка |
Значение события | Нет |
Сопоставление параметров события, описывающих событие. Используйте этот параметр для отправки расширенных внутренних событий приложения, таких как артикул товара, цена позиции.
Формат: JSON
Пример: Чтобы отправить артикул ABC123 для товара синего цвета с ценой за единицу $3,99
Ограничение: 1000 символов Не превышайте этого значения, оно будет усечено. |
Запись сценариев событий
Пример события
// purchase event of shoes with associated revenue
AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});
Отправляемые события зависят от характера веб-приложения. Например, для приложения интернет-магазина требуется набор событий, которые отличаются от событий новостного издания. Ознакомьтесь с приведенными ниже сценариями, чтобы получить представление о событиях, которые вы должны отправить, а также о том, когда они должны быть отправлены.
Интернет-магазин
Предположим, вы управляете интернет-магазином. Вот некоторые стандартные события, которые вы, возможно, захотите записать:
- Поиск: стандартное событие
- Добавить в корзину: стандартное событие
- Удалить из корзины: стандартное событие
- Покупка: событие конверсии
Новостное издание
Предположим, вы управляете новым новостным изданием. Вот некоторые события, которые вы можете записать:
- Регистрация: событие конверсии
- Покупка подписки: событие конверсии
Обеспечение отправки событий
Эта часть предназначена для веб-разработчиков.
Тестирование интеграции веб-SDK для PBA: просмотрите тестовых событий в режиме реального времени.
Чтобы убедиться, что события отправляются в AppsFlyer:
- Откройте веб-сайт.
- Откройте инструменты разработчика браузера.
- Перейдите на вкладку Network (Сеть).
- Запустите событие.
- Фильтр по сообщениям.
- Найдите сетевой запрос, начинающийся с wa.appsflyer.com (см. скриншот ниже).
- Убедитесь, что:
- Код состояния — 200.
- Полезные данные запроса согласуются с параметрами события.
Примеры
Запись событий
Приведенный код носит иллюстративный характер. Не используйте этот код как есть.
- Предположения: Веб-SDK уже загружен страницей к моменту отправки события.
- Примеры сценариев содержат код для записи событий в следующих случаях:
- Загружается целевая страница.
- Пользователи взаимодействуют с веб-сайтом.
Запись событий при загрузке лендинга
- У вас есть страница подписки на новостные рассылки и вы хотите записывать подписки.
- Вы также можете настроить страницу благодарности и перенаправлять на нее пользователей после того, как они подпишутся.
<html>
<head>
<!-- Assume that the server returns a response with details about the newly subscribed user -->
<!-- Alternatively, you can extract data from localStorage or cookies,
in case data was set in either of them during the subscription process
-->
<script>window.onload = function(){
AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category': 'holiday_promotion', eventValue: {'label' : 'newspaper'},
eventName: 'subscription',}); } </script> </head> <body> <h1>Thank You for Subscribing to Our Newsletter</h1> </body> </html>
- Приведенный выше код содержит базовую HTML-страницу. Веб-страница должна загрузить веб-SDK, чтобы вы могли отправлять события.
- После загрузки страницы и перенаправления на нее пользователя метод загрузки окна вызывает метод AF() для отправки события подписки в AppsFlyer.
Запись событий, когда пользователи взаимодействуют с сайтом
- У вас есть сайт электронной коммерции и вы хотите записывать события оформления заказа.
- Когда пользователь нажимает кнопку оформления заказа, веб-SDK отправляет событие в AppsFlyer.
<html>
<head>
<!-- Assume that data about products in the shopping cart
is stored in localStorage -->
<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>
<h2>Shirt</h2>
<p>
<ul>
<li>Color: Blue</li>
<li>Quantity: 2</li>
<li>Price: $20</li>
</ul>
</p>
<h2>Pants</h2>
<p>
<ul>
<li>Color: Black</li>
<li>Quantity: 3</li>
<li>Price: $15</li>
</ul>
</p>
<button id='checkout'>Checkout</button>
</body>
</html>
В приведенном выше коде показана базовая HTML-страница. Веб-страница должна загрузить веб-SDK, чтобы вы могли отправлять события.
- Когда страница загрузится, она привязывает слушателя клика к кнопке Оформление заказа.
- Когда пользователь нажимает на кнопку Оформление заказа, функция обратного вызова:
- извлекает данные из localStorage.
- вызывает метод AF() и передает ему данные.
- Метод AF() отправляет событие в AppsFlyer.
Запись событий при загрузке лендинга
- У вас есть страница подписки на новостные рассылки и вы хотите записывать успешные подписки.
- Вы настраиваете страницу благодарности, на которую перенаправляются пользователи после успешной подписки.
- Создайте страницу благодарности
<html> <head> <script> // Google Tag Manager loads the Web SDK <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> <script> // Assume that the server returns a response with details about the newly subscribed user function getResponseFromServer() { return JSON.stringify({ action: 'subscribe', category: 'site actions', label: userEmail }) } //Alternatively, you can extract data from localStorage or cookies, //in case data was set in either of them during the subscription process 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>
Предшествующий код загружает GTM, который, в свою очередь, загружает веб-SDK. После этого в сценарии происходят два других действия. Одно из них — функция, которая получает ответ от сервера с данными о пользователе. Другое устанавливает данные в локальное хранилище. GTM имеет доступ как к функции, так и к localStorage. Вы можете вызвать функцию и получить доступ к localStorage с помощью GTM.
- Добавьте новый тег для атрибуции подписок после загрузки страницы благодарности
- Дайте тегу отдельное имя и выберите тип тега Custom HTML.
- Поместите следующий код в Custom HTML.
<script> AF('pba', 'event', {eventType: 'EVENT',
eventValue: {'category' : 'holiday_promotion'}
, eventName: 'subscription'}); </script> - Разверните Расширенные настройки, затем Последовательность тегов под текстовой областью и убедитесь, что он настроен на запись конверсии после выполнения тега.
- Для запуска тега конверсии установите триггер. В примере триггер срабатывает при загрузке страницы благодарности.
Запись событий, когда пользователи взаимодействуют с сайтом
- У вас есть сайт электронной коммерции и вы хотите записывать события оформления заказа.
- После того, как пользователь нажмет кнопку оформления заказа, веб-SDK отправит событие в AppsFlyer.
- Настройка страницы оформления заказа
<html> <head> <script> // Google Tag Manager loads the Web SDK <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> <h2>Shirt</h2> <p> <ul> <li>Color: Blue</li> <li>Quantity: 2</li> <li>Price: $20</li> </ul> </p> <h2>Pants</h2> <p> <ul> <li>Color: Black</li> <li>Quantity: 3</li> <li>Price: $15</li> </ul> </p> <button id='checkout'>Checkout</button> </body> </html>
Предшествующий код загружает веб-SDK с помощью GTM. Остальное — просто HTML, имитирующий страницу корзины. Обратите внимание на кнопку Оформление заказа, которая имеет идентификатор оформления заказа. Это необходимо при настройке GTM для обработки нажатия на эту кнопку.
- В GTM нажмите Variables (Переменные), нажмите Configure (Настроить) и отметьте Click Element (Клик по элементу) в списке Built-In Variables (Встроенные переменные).
- Создайте новую переменную, дайте ей осмысленное название и выберите тип Все элементы.
- В конфигурации триггера выберите Some Clicks (Некоторые клики), выберите Click Element (Клик по элементу), который соответствует CSS Selector (Селектор CSS) для #checkout.
- Создайте новый тег для действия оформления заказа, выберите тип Custom HTML и установите триггер на оформление заказа.
<script> AF('pba', 'event', {eventType: 'EVENT',
eventValue: {'category' : 'holiday_promotion'}
, eventName: 'checkout'}); </script>
- Убедитесь, что тег функций веб-SDK загружен перед запуском события.
- Не отправляйте специальные символы в значениях событий, например символы валюты в значении дохода.
- Строки значений должны быть короче 50 символов.
Установка идентификатора клиента после регистрации
Код, приведенный в этих примерах, приведен только для справки. Не используйте этот код как есть. Если вы не знаете, как использовать этот код, проконсультируйтесь со своим веб-разработчиком.
Предположение: Веб-SDK загружается страницей перед отправкой события; не загружайте SDK повторно.
Сценарий пользователя:
- Пользователь регистрируется на вашем сайте.
- Код сайта собирает данные о пользователе и отправляет их на ваш сервер.
- Сервер генерирует уникальный CUID для пользователя.
- На странице благодарности после регистрации вы запрашиваете у сервера новый CUID.
- Используя ответ сервера, вы устанавливаете CUID AppsFlyer с помощью метода веб-SDK setCustomerUserId().
Настройте страницу регистрации:
<html>
<head>
<!-- The Web SDK script loads first -->
<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",{pba: {webAppId: "WEB_DEV_KEY"}})
</script>
<script>
};
// This function stores the user email sent to the server after the user reaches the thank you page
// The response from the server is a unique CUID that should be set using the web SDK setCustomerUserId method
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>
Приведенный выше код представляет собой простую форму регистрации. При отправке формы электронный адрес сохраняется в 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.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",{pba: {webAppId: "WEB_DEV_KEY"}})
</script>
<script>
// Using the fetch API to send the user email to the server
// and get the unique user id in return
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>
В коде используется fetch API. Он отправляет серверу адрес электронной почты, введенный пользователем. Предполагая, что сервер создает пользователя с уникальным CUID при регистрации, отправка адреса электронной почты на сервер осуществляется с целью получения уникального CUID. Сервер отвечает уникальным CUID, и этот уникальный CUID является значением, передаваемым с помощью метода setCustomerUserId.
-
Настройте страницу регистрации:
<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-5VJ6C7R');
// This function stores the user email to be sent to the server after the user reaches the thank you page // the response from the server is a unique CUID that should be used in the web SDK setCustomerUserId method 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>Приведенный выше код представляет собой простую форму регистрации. При отправке формы адрес электронной почты сохраняется в localStorage. Когда пользователь переходит на страницу благодарности, адрес электронной почты пользователя отправляется на сервер для получения уникального CUID для этого адреса.
-
Настройте страницу благодарности для пользователей, которые регистрируются:
(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",{pba: {webAppId: "WEB_DEV_KEY"}}) </script> <script> // using the fetch api to send the user email to the server // and get the unique user id in return 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>
Приведенный выше код представляет собой страницу благодарности с триггером GTM, который отправляет на сервер адрес электронной почты, указанный пользователем в форме регистрации.
Предположим, что при регистрации сервер создает пользователя с уникальным CUID.
Отправка адреса на сервер осуществляется с целью получения уникального CUID.
Сервер отвечает уникальным CUID, который отправляется с помощью метода setCustomerUserId().
Продолжите эту процедуру, чтобы создать триггер и вкладку. - Добавьте новый тег для атрибуции подписок после загрузки страницы благодарности.
- Присвойте тегу отдельное имя и выберите тип тега “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>
- Разверните Расширенные настройки, затем Последовательность тегов под текстовой областью и убедитесь, что он настроен на запись конверсии после выполнения тега.
- Установите триггер для тега конверсии, чтобы указать, когда тег конверсии должен срабатывать (в приведенном ниже примере он срабатывает при загрузке страницы благодарности).
Функция setCustomerUserId может быть отправлена на любом этапе пользовательского потока, например, после входа и регистрации пользователя. AppsFlyer использует самый последний отправленный CUID, чтобы обновить для текущего наблюдаемого пользователя прошлые или будущие точки взаимодействия и события.
Используйте то же значение CUID, что и в функции setCustomerUserd в мобильном приложении (см. мобильный setCustomerUserId для: iOS, Android, Unity).
Дополнительные сведения
Файлы cookie для веб-SDK
Файлы cookie, перечисленные в следующей таблице, устанавливаются или используются в веб-SDK на вашем сайте.
В таблице используются следующие сокращения:
- AMP: Технология ускоренных мобильных страниц (Accelerated Mobile Pages)
- CDN: Сеть доставки контента (Content Delivery Network)
- 3PC: Сторонние файлы cookie (Third-party Cookies)
Имя файла cookie | Домен | Срок действия | Когда применяется | Подробности |
---|---|---|---|---|
afUserid | Домен вашего сайта | 395 дней | не-AMP | Идентификация пользователя в контексте событий загрузки и навигации по сайту |
AF_SYNC | Домен вашего сайта | 1 неделя | не-AMP |
|
af_id | appsflyer.com | 395 дней | не-AMP, если разрешены 3PC | Идентификация пользователя в контексте событий запуска приложения и навигации |
af_id | onelink.me | 395 дней | не-AMP, если разрешены 3PC | Привяжите интеракции с баннером, интеракции с onelink или и то и другое к событиям запуска приложения. |
amp-afUserid | CDN AMP или домен вашего сайта | 1 год | Для страниц, обслуживаемых с помощью AMP |
Заметки о выпуске веб-SDK
Дата | Версия | Примечания |
---|---|---|
01.07.2021 | 1.0 | Сброс параметров запроса |
01.06.2021 | 1.0 | Внедрение политики безопасности контента (CSP) |
31.08.2020 | 1.0 | Добавлена функция отказа и согласия на предоставление данных |
16.04.2020 | 1.0 | Функция customerUserId() заменяет событие IDENTIFY для отправки уникального CUID |
30.07.2020 | 1.0 |
|
Прекращение поддержки
- Уведомление о прекращении поддержки предупреждает о нашем намерении прекратить поддержку функции или метода. Функция или метод продолжает работать до даты деактивации.
- Рассматривайте уведомления о прекращении поддержки как возможность внести изменения в код.
Дата прекращения поддержки |
Дата деактивации | Подробности |
---|---|---|
16.04.2020 | Будет объявлено позже |
Устаревший метод: Отправка идентификатора клиента (CUID) в параметре события customUserId с параметром eventType, установленным на "IDENTIFY". Текущий метод: Отправьте CUID с помощью функции setCustomerUserId(). |