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

Краткий обзор: Установите Web SDK AppsFlyer (также известный как пиксель) на своем сайте, чтобы сообщать о посещениях пользователей и событиях в AppsFlyer, а также установить постоянный идентификатор пользователя (CUID) для унификации путей пользователей на разных платформах.

Обзор

Web SDK позволяет фиксировать, как посетители взаимодействуют с вашим сайтом, и отправляет эту информацию в AppsFlyer. Это модуль плагина размером 40–60 КБ, который сообщает о посещениях пользователей и действиях на вашем сайте на платформу AppsFlyer.

Интегрируйте SDK вручную

Следуйте приведенным ниже шагам, чтобы завершить интеграцию Web SDK от установки до валидации и настройки конфиденциальности.

Получите свои ключи. Получите идентификатор Web SDK (также известный как ключ разработчика Web).
Выберите фрагмент кода. Выберите фрагмент, который соответствует вашему типу интеграции и требованиям безопасности.
Разверните Web SDK. Разверните SDK, используя нативный сниппет кода, Google Tag Manager или Adobe Launch Tag Manager.
Убедитесь, что SDK работает. Проверьте, что SDK отправляет запросы, проверив сетевые обращения в инструментах разработчика браузера.
Настройте и записывайте события. Настройте и регистрируйте события Задайте и отправляйте пользовательские события при загрузке страницы или взаимодействии пользователя, используя нативный JavaScript или Google Tag Manager.
идентификатор пользователя клиента. Установите постоянный CUID для унификации веб-активности с другими платформами.
Управление конфиденциальностью. Управляйте согласием на сбор метрик или отказом от него, а также настраивайте безопасность и фильтрацию данных (политику безопасности данных и отбрасывание параметров запроса).
Справочник по cookie-файлам Web SDK. Справочник по файлам cookie Web SDK [ Просмотрите cookie, которые устанавливает или использует Web SDK, включая цель, срок действия и область применения.

Интегрируйте SDK с ИИ-агентом для написания кода

Вместо того чтобы вручную выполнять интеграцию Web SDK (см. шаги ниже), используйте AI-инструмент для написания кода (Cursor, Claude Code, Codex, Copilot), чтобы он реализовал всю интеграцию за вас. Скопируйте промпт, замените два плейсхолдера и вставьте его в свой ИИ-инструмент для написания кода.

Этот подход упрощает процесс и охватывает все шаги ниже, но вам все равно нужно убедиться, что SDK работает правильно, и проверить настройки конфиденциальности после этого.

Перед копированием запроса замените:

<WEB_SDK_ID>: в AppsFlyer перейдите в App Settings, выберите свое веб-приложение (домен вашего сайта с префиксом "website-"), а затем скопируйте Web SDK ID из раздела SDK authentication.
<PRODUCTION_URL>: URL-адрес вашего рабочего сайта; используется для проверки после развертывания.

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

Промпт для ИИ по внедрению

# **AppsFlyer Web SDK — промпт для внедрения с помощью ИИ**

Скопируйте приведенный ниже промпт в инструмент для написания кода на базе ИИ, который может редактировать ваш проект (Cursor, Claude Code, Codex, Copilot). Перед копированием замените два плейсхолдера:

  - <WEB_SDK_ID> — в AppsFlyer перейдите в My Apps, выберите свое веб-приложение (ваш домен с префиксом website-) и скопируйте Web SDK ID (также называемый Web Dev Key) из раздела SDK authentication.
  - <PRODUCTION_URL> — URL-адрес вашего рабочего сайта, который используется для проверки после развертывания.

Внедрите AppsFlyer Web SDK (пиксель веб-атрибуции) на этом сайте, включая события, важные для моего маркетингового измерения.

Мой Web SDK ID: <WEB_SDK_ID>

Мой URL-адрес для продакшена: <PRODUCTION_URL>

## Шаг 0 — проверка конфигурации

Если указанный выше Web SDK ID отсутствует или все еще является плейсхолдером, ответьте ТОЛЬКО коротким запросом предоставить его (в AppsFlyer: My Apps > приложение с префиксом "website-" > SDK authentication > Web SDK ID) и остановитесь. Не пишите код, пока он не будет предоставлен. Если URL-адрес для продакшена отсутствует, запросите его в том же ответе — он нужен для проверки после развертывания.

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

## Шаг 1 — сначала проанализируйте сайт

Прежде чем писать код, изучите кодовую базу и самостоятельно составьте план событий — не просите меня перечислить события:

1. Определите фреймворк (чистый HTML, React, Next.js, Vue и т. д.) и где контролируется <head> документа.

2. Определите по коду действия-конверсии. Ищите в следующем порядке, по степени надежности:

   - Существующие вызовы аналитики: события gtag()/GA4, Segment analytics.track(), fbq('track'), dataLayer.push (включая объекты ecommerce) — они показывают и сами действия, и где уже находятся значения (сумма, валюта, идентификатор заказа).

   - Логика коммерции: модули корзины и оформления заказа, страницы/маршруты подтверждения заказа и благодарности, колбэки успешной оплаты.

   - Логика аутентификации: сценарии регистрации и входа, а также место, где внутренний идентификатор пользователя становится доступен в клиентском коде.

   - Формы и CTA: лид-формы, начало подписки/пробного периода, загрузки.

   - Некоммерческие сайты / сайты с инструментами: если на сайте нет сценариев покупки, корзины, оформления заказа, регистрации или входа, не придумывайте коммерческие события или события аутентификации. Вместо этого определите реальные действия в продукте (например, генерация, копирование, экспорт, загрузка, отправка, выбор шаблона, редактирование параметров) и сопоставьте им пользовательские описательные названия событий.

3. Сопоставьте каждое найденное действие со стандартным названием AppsFlyer:

   - completed order / "Order Completed" / purchase_success -> af_purchase (с eventRevenue)

   - signup / register / account created -> af_complete_registration

   - login / signin -> af_login

   - add to cart / "Product Added" -> af_add_to_cart (af_price, без eventRevenue)

   - begin checkout / "Checkout Started" -> af_initiated_checkout (af_price, без eventRevenue)

   - product or content view -> af_content_view

   - subscription started -> af_subscribe; free trial started -> af_start_trial

   - search -> af_search

   Для всего, у чего нет стандартного эквивалента, сохраните описательное пользовательское название.

4. Для каждого события определите в коде точный источник следующих данных: фактически списанной суммы (для af_purchase), валюты, идентификатора заказа/транзакции и идентификатора пользователя. Используйте те же источники данных, из которых считывает данные существующая аналитика.

5. Проверьте, есть ли существующая платформа управления согласием (CMP), например OneTrust или Didomi. Также отметьте любые самописные переключатели согласия или настройки конфиденциальности, сохранённые сайтом, и спросите меня, как они должны ограничивать измерение, вместо того чтобы решать за меня.

Примечание: существующая аналитика используется только как входные данные для анализа — реализуйте события AppsFlyer как прямые вызовы AF(), а не как события, передаваемые через Segment/GA4 с их именами.

Затем покажите мне предлагаемый план событий в виде таблицы (имя события AppsFlyer, триггер + файл, источник дохода/af_price, источник идентификатора для дедупликации) и дождитесь моего одобрения перед реализацией. Отмечайте все события, для которых вы не смогли найти источник значения, вместо того чтобы гадать.

## ШАГ 2 — Установка фрагмента SDK

Добавьте этот фрагмент ближе к началу <head> на каждой странице, указав мой идентификатор 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_SDK_ID>"}})

</script>

Обязательные правила:

- Используйте фрагмент без изменений. НЕ переписывайте его как пользовательский компонент или модуль-обертку. Обёрнутые SDK могут отправлять пользовательские события, но автоматический визит (событие LOAD SDK) при этом никогда не срабатывает — тогда сайт показывает ноль визитов, и ничего нельзя атрибутировать.

- SDK должен загружаться ровно ОДИН раз при каждой загрузке страницы. В React/Next.js предусмотрите защиту от повторных рендеров и двойного монтирования (например, загружайте его в корневом HTML-шаблоне/шаблоне документа, а не внутри компонента, который монтируется повторно). Многократная загрузка может помешать работе SDK.

- Если сайт уже загружает SDK AppsFlyer через менеджер тегов (GTM), НЕ добавляйте его еще и в код — должен быть один загрузчик, а не два. Сообщите мне, если найдете существующий тег AppsFlyer.

- НЕ реализуйте событие просмотра страницы или визита вручную. SDK автоматически регистрирует визиты при загрузке; самописное событие "page_view" никогда не будет засчитано как визит.

- Ключ конфигурации — webAppId (не appId).

- Если на сайте действует строгая Content Security Policy с nonce, добавьте nonce в тег встроенного фрагмента и убедитесь, что политика включает 'strict-dynamic' — фрагмент динамически внедряет скрипт SDK, и без 'strict-dynamic' политика только с nonce заблокирует его.

## ШАГ 3 — Реализация событий

Формат вызова события:

AF('pba', 'event', {

  eventType: 'EVENT',            // всегда используйте буквальную строку 'EVENT'

  eventName: 'af_purchase',

  eventRevenue: 49.99,           // верхний уровень — только для фактически полученного дохода

  eventRevenueCurrency: 'USD',   // верхний уровень — 3-буквенный код ISO; по умолчанию используется USD, если параметр не указан

  eventValue: {                  // метаданные JSON, максимум 1000 символов

    "af_order_id": "TXN-12345",

    "af_customer_event_id": "evt-abc-001"

  }

});

Правила для событий — строго следуйте им:

1. Используйте стандартные имена событий AppsFlyer, чтобы кроссплатформенная отчетность и воронки были согласованы: af_purchase, af_complete_registration, af_login, af_add_to_cart, af_initiated_checkout, af_content_view, af_subscribe. Если есть мобильное приложение, используйте ТЕ ЖЕ имена событий, что и в мобильном SDK. Никогда не добавляйте суффиксы платформы, например "_web".

   Исключение — отдельные линии покупок: если сайт явно продаёт разные уровни продукта или категории, для которых нужна отдельная разбивка в дэшборде (например, два продукта подписки), предложите в плане событий разделённые имена (af_purchase_<tier>) вместо одного общего события и укажите причину. Сегментация только через eventValue не отображается в стандартных представлениях дэшборда. Никогда не отправляйте и событие уровня tier, и общее событие для одной и той же покупки — это дублирует данные.

2. Доход передавайте ТОЛЬКО в поле верхнего уровня eventRevenue и ТОЛЬКО для событий, в которых деньги действительно были списаны (завершенная покупка, завершенная подписка, подтвержденное бронирование). Значения внутри eventValue (af_revenue, revenue, price, amount, total) НИКОГДА не учитываются как доход — указание дохода там является ошибкой внедрения №1 и приводит к доходу $0 по каждой покупке.

3. Всегда отправляйте eventRevenueCurrency вместе с eventRevenue, если валюта не USD, — иначе любая сумма будет записана как USD.

4. Передавайте фактическую сумму одной транзакции как обычное число: без символов валют, без центов как единиц, без дублирования «общая сумма корзины + стоимость товара», без lifetime value.

5. Для денежных значений, которые НЕ являются фактически полученным доходом (стоимость добавления в корзину, стоимость начала оформления заказа, просмотренная цена), НЕ задавайте eventRevenue. Укажите сумму в "af_price", а валюту — в "af_currency" внутри eventValue. Если отправлять eventRevenue и для af_initiated_checkout, и для af_purchase, доход будет учитываться дважды.

6. Для покупок добавляйте "af_order_id" (идентификатор ID транзакции) в eventValue. Если в кодовой базе на этом этапе нет реального идентификатора ID транзакции, укажите это в плане событий вместо подстановки заглушки.

7. Добавляйте уникальный "af_customer_event_id" в eventValue для каждого события конверсии. Одно и то же имя события никогда не должно срабатывать дважды с одним и тем же идентификатором ID — генерируйте его для каждого действия и защититесь от повторного срабатывания обработчика из-за повторных рендеров SPA. Это также устраняет дублирование с любым серверным потоком (S2S), который отправляет те же конверсии.

8. Одно событие на одно действие пользователя. Не отправляйте два имени для одного и того же действия и не ретранслируйте одно и то же действие одновременно через AppsFlyer и слой переадресации под разными именами.

9. Для корзин с несколькими товарами добавьте массив "af_order_info" в eventValue — по одному объекту на каждый товар со следующими ключами: sku, revenue (цена за единицу), qty, content_name, content_type, content_category, brand. При покупке поле верхнего уровня eventRevenue по-прежнему содержит общую сумму заказа.

10. События должны срабатывать после загрузки SDK-сниппета на странице. Для конверсий, которые заканчиваются на странице подтверждения или благодарности, запускайте событие при загрузке этой страницы; для действий внутри страницы (нажатий кнопок в SPA) запускайте его из обработчика действия.

11. Разреженные payload'ы — опускайте нерелевантные поля:\n\n    - НЕ включайте eventRevenue или eventRevenueCurrency, если в рамках этого события деньги фактически не были списаны. Никогда не отправляйте eventRevenue: 0 или валюту по умолчанию «на всякий случай».

    - НЕ включайте eventCategory, eventLabel и любые поля в стиле GA/Segment. Они не входят в API событий Web SDK AppsFlyer.

    - Внутри eventValue не указывайте ключи, значения которых представляют собой пустую строку, null, undefined или false (если только само значение false не имеет смысла для этого свойства).

    - Если параметр не относится к конкретному событию, вообще не добавляйте его в payload. Предпочтителен минимальный объект, содержащий только применимые поля.

    - Пустые столбцы дохода/валюты в отчетах AppsFlyer не означают, что клиент должен отправлять нули или значения по умолчанию — оставляйте эти поля отсутствующими.

## Шаг 4 — задайте Customer User ID (CUID)

Сразу после того, как пользователь выполнит вход или зарегистрируется (а также при загрузке страниц, где пользователь уже аутентифицирован), вызовите:

AF('pba', 'setCustomerUserId', '<внутренний идентификатор пользователя в виде строки>');

Правила:

- Используйте ТОТ ЖЕ идентификатор, который мобильные приложения передают в setCustomerUserId, если мобильные приложения существуют, — именно он связывает путь одного пользователя между вебом и мобильными платформами.

- Используйте внутренний идентификатор, который нельзя сопоставить с реальными данными пользователя. Никогда не используйте адрес электронной почты, номер телефона или другие PII.

- Вызывайте это как можно раньше — события, отправленные до этого, не будут содержать CUID.

- Сам по себе setCustomerUserId не создает события для отчетности. Также отправляйте af_complete_registration при регистрации и af_login при входе в систему после установки CUID, чтобы эти события его содержали.

## Шаг 5 — согласие (только если существует CMP)

Если на сайте есть платформа управления согласием:

- Инициализируйте SDK с выключенным измерением: {pba: {webAppId: "<WEB_SDK_ID>", measurementStatus: false}}

- При получении согласия: window.AF_SDK.PLUGINS.PBA.enableMeasurement()

- При отзыве согласия: window.AF_SDK.PLUGINS.PBA.disableMeasurement()

Примечания:

- Эти методы плагина существуют только после полной загрузки скрипта SDK, в отличие от AF(), который представляет собой заглушку с очередью и доступен сразу. Учитывайте этот порядок.

- Если измерение изначально выключено, до получения согласия ни один визит не записывается. Явно укажите этот компромисс до начала реализации.

Если CMP нет, используйте обычный сниппет (по умолчанию измерение включено).

## Шаг 6 — проверка

### 6a. Локальная проверка (во время реализации)

Запустите проект, управляйте браузером (Playwright/Puppeteer или другой инструмент для браузера, если он у вас есть) и перехватите И payload запроса, И статус HTTP-ответа для каждого вызова к доменам AppsFlyer. Проверьте:

- Запрос загрузчика SDK возвращает 200 и выполняется ровно один раз при каждой загрузке страницы (переходите между страницами и повторно рендерите компоненты, чтобы подтвердить отсутствие двойной загрузки).

- При загрузке страницы отправляется запрос с eventType "LOAD" и заполненным afWebUserId, а его ответ имеет статус 2xx — это визит; без него ничего не будет атрибутировано.

- Каждая реализованная конверсия создает ровно один запрос события, каждый из которых возвращает 2xx; при покупках eventRevenue и eventRevenueCurrency находятся на верхнем уровне, а af_customer_event_id присутствует и уникален.

- После имитации входа в систему последующие запросы содержат идентификатор ID клиента.

Перехваченный запрос НЕ является доказательством успеха. Событие, ответ на которое имеет статус 4xx, было отклонено и никогда не появится в отчетности. Сообщайте код статуса для каждого отправляемого события и никогда не называйте событие проверенным без него.

Если вы не можете запустить браузер, выполните статическую проверку: у сниппета есть одна точка вставки, которая не может смонтироваться дважды; каждый обработчик событий срабатывает ровно один раз на действие; доход и валюта находятся на верхнем уровне; setCustomerUserId доступен на каждом пути входа для аутентифицированных пользователей. Прямо укажите, что статус ответа наблюдать не удалось.

### 6b. Проверка после развертывания на реальном домене (обязательно)

Локальные запуски подтверждают путь выполнения кода, но не то, как ведет себя страница в продакшене. Конвейеры сборки и обработчики ресурсов могут удалять, откладывать или перемещать встроенные скрипты, поэтому проверки исходного файла недостаточно. После развертывания:

- Откройте production URL-адрес и убедитесь, что сниппет присутствует в ОТДАВАЕМОМ HTML.

- Откройте страницу в продакшене в браузере и повторите для нее все проверки из 6a.

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

- Используйте отдельный QA customer user ID (например, qa_<yyyymmdd>_01), чтобы этот запуск потом можно было изолированно найти в сырых данных.

Если развертывание ещё не выполнено, сообщите мне, что пункт 6b всё ещё не закрыт, и укажите точные команды и проверки, которые нужно выполнить после развертывания.

### 6c. Запись QA

Подготовьте таблицу с данными проверочного запуска, чтобы потом можно было сопоставить строки в сырых данных AppsFlyer; одна строка на каждое событие: временная метка UTC, имя события, CUID, af_order_id, af_customer_event_id, статус HTTP. Укажите время начала и окончания всего запуска в UTC, а также время развертывания в UTC, если оно вам известно.

## Шаг 7 — Чтение данных

Включите в отчет явную инструкцию по проверке событий в AppsFlyer, потому что визиты и конверсии — это разные типы записей, и их легко перепутать:

- Визиты регистрируются автоматически и отображаются в данных уровня событий как строки SESSION с пустым именем события и нулевым доходом — так устроена схема, это не ошибка. Первые визиты и повторные визиты отображаются в данных уровня конверсий (FIRST_VISIT / REVISIT), а не как именованные события. Экспорт с областью сессии никогда не может содержать события в приложении, независимо от того, насколько корректна реализация.

- Реализованные конверсии отображаются как отдельные строки с заполненным именем события (af_purchase, af_login и т. д.), при этом доход указывается только в строках покупки.

- Данные, выгруженные за период ДО развертывания, не могут содержать новые события. Сообщите мне время развертывания в UTC и скажите, чтобы я выполнял запросы только после него. Укажите, что поля времени атрибуции могут быть намного старше времени события и относиться к предыдущему визиту, а не к этому запуску.

- Укажите ожидаемую задержку отчетности и предупредите меня, что пустой отчет в пределах этого окна не следует считать сбоем.

- Сообщите мне точный фильтр, который нужно использовать, чтобы найти QA-запуск из 6c (временное окно плюс QA CUID), и опишите, как выглядит корректный результат.

- Если события возвращают 2xx, но все равно не появляются после окна задержки, четко укажите, что это проблема на стороне аккаунта (событие не включено для веб-приложения, область отчетности или доступ к данным), а не дефект кода, и перечислите, что мне нужно проверить в интерфейсе AppsFlyer.

## Результат

После завершения предоставьте мне:

- Таблицу со всеми реализованными событиями: имя, место срабатывания (файл), обработка дохода, идентификатор дедупликации.

- Где был установлен сниппет и как гарантируется его однократная загрузка.

- Где вызывается setCustomerUserId.

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

- Инструкцию из шага 7 о том, как читать данные.

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

Не реализуйте ничего, кроме интеграции Web SDK AppsFlyer, описанной здесь.

1. Получите свои ключи

Получите идентификатор Web SDK (также известный как ключ веб-разработчика):

В AppsFlyer в верхнем меню откройте Мои приложения.
Выберите свое веб-приложение (домен вашего сайта с префиксом "website-").
Скопируйте необходимый идентификатор Web SDK.

Получите ключ Smart Banner (если необходимо):

В AppsFlyer в боковом меню перейдите в раздел Вовлечение > Web to App > Смарт-баннеры.
Скопируйте необходимый ключ смарт-баннеров.

2. Выберите фрагмент кода

Выберите фрагмент, который соответствует вашему типу интеграции и требованиям безопасности. Доступны следующие две опции:

Стандартный Web SDK: Стандартная интеграция.
Расширенная проверка SDK: Улучшенная интеграция, которая добавляет защиту цепочки поставок для Web SDK. Используйте эту опцию, чтобы добавить дополнительный уровень защиты от компрометации CDN, перехвата DNS и атак «человек-посередине».

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

Стандартный Web SDK

Используйте этот фрагмент для развертывания стандартной интеграции Web SDK. Вставьте его в верхней части тега на всех страницах, где вы хотите загрузить SDK.

Без смарт-баннеров

<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>

Расширенная проверка SDK

Расширенная проверка SDK добавляет защиту цепочки поставок для Web SDK. Это гарантирует, что код, который работает в браузерах ваших пользователей, — именно тот, который опубликовал AppsFlyer. Исходный код SDK идентичен стандартной интеграции; различаются только механизмы доставки и проверки.

Расширенная проверка SDK:

Добавляет дополнительный уровень безопасности против компрометации CDN, захвата DNS и атак «человек посередине».
Добавляет примерно 250 мс к времени загрузки SDK.

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

Если ваш сайт применяет Политику безопасности контента (CSP) с использованием nonce, смотрите Политика безопасности контента (CSP) в разделе Управление конфиденциальностью чтобы получить расширенный вариант этого сниппета с nonce.

Без смарт-баннеров

<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>

3. Разверните сниппет

Разверните выбранный вами на Шаге 2 сниппет, используя один из следующих методов. Убедитесь, что SDK загружается только один раз при каждой загрузке страницы.

Вариант A: Добавьте непосредственно на ваш сайт

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

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

Вариант B: Разверните через Google Tag Manager (GTM)

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

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

Пользовательские шаблоны GTM не поддерживаются для продвинутой проверки SDK, потому что их изолированная среда не позволяет установить атрибут integrity, необходимый для верификации. Вместо этого используйте тип тега Пользовательский HTML.

Вариант С: Разверните через Adobe Launch Tag Manager

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

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

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

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

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

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

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

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

4. Убедитесь, что SDK работает

После установки проверьте, что SDK отправляет запросы, проверив сетевые запросы в инструментах разработчика вашего браузера.

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

Откройте веб-сайт.
Откройте инструменты разработчика в браузере.
Перейдите на вкладку (A) Сеть.
Обновите страницу.
Фильтровать по (B) appsflyer. Может появиться два запроса:
- Загрузчик SDK — URL запроса начинается с https://websdk.appsflyersdk.com. Это подтверждает, что скрипт SDK загружен правильно.
- Данные события — URL запроса начинается с https://wa.appsflyer.com/events. Это подтверждает, что SDK отправляет данные событий в AppsFlyer.
Выберите сообщение (C) события (вызов wa.appsflyer.com).
В разделе Заголовки (D) убедитесь, что:
- URL запроса начинается с https://wa.appsflyer.com/events?site-id=.
- site_id параметр запроса = WEB_DEV_KEY.
- Код статуса 200.
Проверьте, что site_id соответствует WEB_DEV_KEY в AppsFlyer > верхнее меню > Мои приложения.
Убедитесь, что пакет SDK загружается только один раз. Многократная загрузка SDK может привести к тому, что SDK перестанет работать.

Чтобы в реальном времени визуально подтвердить установку Web SDK и проверить, что ваши события срабатывают корректно, используйте страницу теста Web SDK.

5. Установите и запишите события

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

Задать события

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

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

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

Таблица параметров событий Web SDK

Название параметра	Обязательно	Description(Описание)
`eventType`	Да	Тип события Формат: Строка. Формат: Строка. Всегда заполняйте этот параметр значением `EVENT`.. Пример: `eventType: "EVENT"`
`eventName`	Да	Название события Формат: Строка. Формат: Строка. Пример: Покупка, подписка
`eventRevenue`	Ни один	Доход, присвоенный событию конверсии Формат: Тип: Float
`eventRevenueCurrency`	Ни один	Валюта выручки Валюта выручки Валюта выручки Код валюты по ISO 4217 из трех символов По умолчанию: USD Формат: Строка По умолчанию: USD. По умолчанию: USD. форматирования ячеек с затратами;
`Значение события`	Ни один	Сопоставление параметров события, описывающих событие. Используйте этот параметр, чтобы передавать расширенные события внутри приложения, например артикул товара и цену позиции. Формат: JSON. Пример: `{"sku": "ABC123", "color": "blue", "unit_price": 3.99, "currency": "USD"}` Ограничение: 3000 символов (если лимит превышен, строка будет обрезана).

Записывайте события при загрузке страницы

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

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

Приведённые ниже примеры кода предназначены только для иллюстрации. Не используйте этот код в таком виде; адаптируйте его к конкретной структуре вашего сайта.

Пример: Запишите событие через AF Web SDK

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

Пример: Пользователь завершает регистрацию на рассылку и перенаправляется на страницу подтверждения. Вы хотите записать событие подписки, как только эта страница станет видимой.

Пример загрузки нативной страницы:

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

Как это работает:

Страница загружает необходимый контент.
Как только окно полностью загружено (window.onload), скрипт автоматически вызывает метод AF().
Событие подписки, вместе с его сопутствующими метаданными (категория и метка), отправляется напрямую в AppsFlyer.

Пример: Запишите событие через GTM

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

1. Создайте страницу «Спасибо»

Следующая структура HTML загружает GTM, который, в свою очередь, загружает Web SDK. Она также демонстрирует, как данные могут быть доступны для GTM через функции или localStorage.

<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>

2. Настройте тег GTM

Создайте новый тег в GTM и выберите тип тега Пользовательский HTML.
Укажите уникальное имя (например, "Событие подписки AF").

Вставьте следующий скрипт в текстовое поле HTML:

AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'subscription'});

Разверните Расширенные настройки > Последовательность тегов. Убедитесь, что он настроен на срабатывание после основного тега инициализации Web SDK.
Установите триггер для этого тега, чтобы он срабатывал при Просмотре страницы вашей страницы "Спасибо".

Записывайте события при взаимодействии пользователя.

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

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

Пример: Запишите событие через AF Web SDK

Используйте этот метод для измерения конкретных действий, которые пользователи выполняют на странице, например клика по кнопке Checkout или Download.

Пример: Вы управляете сайтом электронной коммерции и хотите зафиксировать событие оформления заказа в момент, когда пользователь нажимает кнопку Оформить заказ в своей корзине.

Пример нативного взаимодействия пользователя:

<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>Корзина</h1>
    <button id='checkout'>Оформление заказа</button>
</body>
</html>

Как это работает:

Когда страница загружается, скрипт привязывает обработчик событияклика к элементу с идентификатором checkout.
Когда пользователь нажимает кнопку, вызывается функция-обработчик обратного вызова.
Функция может извлекать соответствующие данные (например, из localStorage) и передавать их в метод AF().
SDK затем передает событие оформления заказа на платформу AppsFlyer.

Пример: Запишите событие через GTM

Этот метод фиксирует конкретные действия, такие как нажатие кнопки Оформить заказ, используя встроенные переменные и триггеры GTM.

1. Настройка страницы оформления заказа

<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>Корзина</h1>
    <button id='checkout'>Оформление заказа</button>
</body>
</html>

2. Настройте переменные и триггеры GTM

В GTM нажмите Переменные > Настроить и включите Элемент клика в списке встроенных переменных.
Создайте новую переменную, определяемую пользователем (Тип: Все элементы).
Создайте новый Триггер:
- Тип триггера: Клик - Все элементы.
- Этот триггер срабатывает на: Некоторые клики.
- Условие Элемент клика соответствует CSS селектору #checkout.

3. Создайте тег взаимодействия

Создайте новый тег Пользовательский HTML для действия «Оформление заказа».

Вставьте скрипт взаимодействия:

<script>
  AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'});
</script>

Назначьте триггер "Клик по оформлению заказа", который вы создали на предыдущем шаге.

Лучшие практики реализации событий

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

Порядок загрузки: Убедитесь, что тег функций Web SDK полностью загружен в области страницы до выполнения любых вызовов событий.
Форматирование данных: Не включайте специальные символы в значения событий. Например, используйте числовые значения для дохода, а не включайте символы валюты (используйте 10.50 вместо $10.50).
Ограничения строк: Делайте строки eventValue лаконичными; значения длиннее 3000 символов будут обрезаны.
Дедупликация событий: Мы рекомендуем передавать af_customer_event_id в eventValue с уникальным значением для каждого события. Это особенно важно, если вы отправляете одно и то же событие и через Web SDK, и через server-to-server (S2S) API. AppsFlyer передает это значение в рекламную сеть, которая использует его для дедупликации серверного события, полученного от AppsFlyer, с тем же событием, которое она получила через собственный пиксель.
Размещение дохода: Заполняйте eventRevenue только для событий, в которых деньги действительно были получены, например для покупки или подтвержденной подписки. Для событий, которые имеют денежное значение, но не являются фактическим доходом (например, добавление в корзину, начало оформления заказа или просмотр контента), вместо этого используйте af_price и af_currency в eventValue. Если отправлять eventRevenue и при оформлении заказа, и при покупке, доход будет учитываться вдвое в каждом отчете.
Именование событий: Не добавляйте к названиям событий суффиксы платформы, например _web. Платформа уже есть как измерение в дэшборде и в сырых данных. Используйте те же названия событий, что и в вашем мобильном приложении, чтобы сохранить единую кросс-платформенную отчетность.

6. Установить идентификатор пользователя клиента

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

Ключевые правила

Последовательность: Используйте то же значение CUID, что и в ваших мобильных приложениях (см. мобильный setCustomerUserId для: iOS, Android, Unity).
Время: Вы можете отправить CUID на любом этапе (например, после входа в систему или регистрации). Установите CUID как можно раньше, как только у вас будет к нему доступ. В большинстве случаев это означает, что вам нужно подождать, пока пользователь пройдет идентификацию через вход или регистрацию.
Синтаксис: Отправьте значение как строку (в кавычках). Пример: AF('pba', 'setCustomerUserId', '663274')
Конфиденциальность: Не включайте персональные данные (PII), например адреса электронной почты или номера телефонов.

Пример: Установка CUID после регистрации (нативно)

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

Предположение: 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>

Пример: Установка CUID после регистрации (Google Tag Manager)

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

Пример кода ниже представляет собой простую форму регистрации. При отправке формы адрес электронной почты сохраняется в 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>

Настройте страницу благодарности для пользователей, которые регистрируются: Настройте страницу благодарности для пользователей, которые регистрируются: Настройте страницу благодарности для пользователей, которые регистрируются: Код ниже представляет собой страницу благодарности с триггером 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>
```
Добавьте новый тег для атрибуции подписок после загрузки страницы благодарности.

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

Присвоение имени тегу и выбор типа тега «Пользовательский HTML» в GTM

<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>

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

7. Управление конфиденциальностью

После внедрения измерения событий вам может потребоваться ввести особые требования по безопасности и конфиденциальности, чтобы соответствовать внутренним стандартам организации или региональным нормам.

Согласие на отправку событий или отказ от нее

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

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

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

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

Если measurementStatus пусто или NULL, AppsFlyer рассматривает это так, как если бы measurementStatus:true.

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

Явный контроль имеет приоритет над начальной настройкой состояния и использует постоянные собственные файлы 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.

Политика	Работает	Примечания
`script-src 'self'`	Нет	Внешний CDN-источник не разрешен; встроенный скрипт также заблокирован.
`script-src 'self' https://websdk.appsflyersdk.com`	Частичный	Разрешает загрузчик и SDK, но встроенный скрипт настройки все еще заблокирован.
`script-src 'nonce-...' https://websdk.appsflyersdk.com`	Да	Nonce охватывает встроенный скрипт и загрузчик; тег SDK получает nonce, переданный загрузчиком.
`script-src 'nonce-...' 'strict-dynamic'`	Да (рекомендуется)	Nonce охватывает встроенный скрипт и загрузчик; `strict-dynamic` передает доверие динамически внедренному тегу SDK. CDN-источник не требуется в белом списке.

Совместимость политики CSP

Расширенная проверка 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

Справочник файлов cookie Web SDK

Web SDK устанавливает или использует следующие файлы cookie:

Название файла cookie	Домен	Срок действия	Когда применяется	Подробности
afUserid	Домен вашего сайта	395 дней	Страницы без AMP	Идентифицирует пользователя в контексте загрузки веб-страницы и событий навигации.
AF_SYNC	Домен вашего сайта	1 неделя	Страницы без AMP	Указывает, что установлен окончательный идентификатор пользователя. Используется для уменьшения времени загрузки сайта.
af_id	appsflyer.com	395 дней	Обычные мобильные страницы (не AMP) при разрешённых сторонних cookie	Идентифицирует пользователя в контексте событий запуска приложения и навигации
af_id	onelink.me	395 дней	Обычные мобильные страницы (не AMP) при разрешённых сторонних cookie	Ссылки связывают взаимодействия с баннерами, взаимодействия OneLink или оба этих типа с событиями запуска приложения.
amp-afUserid	AMP CDN или домен вашего сайта	1 год	Ускоренные мобильные страницы (AMP)
AF_DEFAULT_MEASUREMENT_STATUS	Домен вашего сайта	395 дней	Страницы без AMP	Хранит состояние согласия. Блокирует работу SDK до тех пор, пока пользователь не даст согласие. По умолчанию не установлено. Используется только когда механизм согласия настроен.

Чем мы можем помочь?

Поиск

Обзор

Интегрируйте SDK вручную

Интегрируйте SDK с ИИ-агентом для написания кода

1. Получите свои ключи

2. Выберите фрагмент кода

Стандартный Web SDK

Расширенная проверка SDK

3. Разверните сниппет

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

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

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

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

4. Убедитесь, что SDK работает

5. Установите и запишите события

1. Создайте страницу «Спасибо»

2. Настройте тег GTM

1. Настройка страницы оформления заказа

2. Настройте переменные и триггеры GTM

3. Создайте тег взаимодействия

6. Установить идентификатор пользователя клиента

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

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

7. Управление конфиденциальностью

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

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

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

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

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

Справочник файлов cookie Web SDK