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

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

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

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

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

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

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

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

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

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

注意事项与操作要求

前期准备 ：

• 请与市场营销人员确认已创建品牌套件。 
• 如需更多说明，请参见PBA上手指南。
• 注意事项：如您已经在使用独立的智能横幅Web SDK，请先将其移除，统一替换为Web SDK，以便同时支持Smart Banners和PBA；请勿为PBA添加单独的Web SDK。 

具体方法如下：

• 获取Web SDK的网页开发者密钥。 注意：此密钥与移动应用使用的密钥不同。
  • 如需获取网页开发者密钥： 
    1. 从AppsFlyer后台的顶部菜单栏中选我的应用
    2. 点击查看品牌套件。
    3. 复制所需的Web Dev Key(WEB_DEV_KEY)。
• 如需使用智能横幅，请获取智能横幅密钥。 
  • 操作方法如下：
    1. 从AppsFlyer后台的侧边栏中选择互动> 网页到应用>智能横幅。
    2. 复制所需的智能横幅密钥。 
• 确认您已获得在网站的head标签中添加脚本的权限。
• 如果使用Google Tag Manager（GTM），请确保GTM已完成与网站的对接。

您可以通过以下任意方式对接Web SDK： 

安装完成后，需要验证访客浏览器是否能够成功调用AppsFlyer Web SDK，并确保数据消息已正常发送。您可以通过检查浏览器开发者工具中的网络请求来完成此操作。

验证SDK加载和运行的步骤如下：

1. 打开网站。

2. 打开浏览器开发者工具。

   

3. 转到（A）广告平台选项卡。 
4. 刷新页面。
5. 按（B）wa.appsflyer筛选。
6. 选择（C）events消息。
7. 在 Headers（D）中确认以下信息：
   • Request URL为wa.appsflyer.com/events。
   • site_id 查询参数=WEB_DEV_KEY。
   • (E) status code is 200.
8. 验证site_id的值是否与品牌套件设置中的WEB_DEV_KEY一致：
   1. 在AppsFlyer后台的侧边栏中选择设置> 品牌套件。
   2. 点击网页开发者密钥复制密钥。
   3. 将密钥粘贴到任意位置（例如新浏览器标签页或记事本）以查看。
   4. 验证site_id和WEB_DEV_KEY是否匹配。 
9. 确保SDK仅加载一次。多次加载可能会导致SDK无法正常运行。

Web SDK会将访客事件数据发送至AppsFlyer。您可以根据需要开启、关闭或控制事件发送。 

注意事项：

• SDK初始状态设置：确定SDK是在页面加载时立即发送事件，还是等待明确的命令后再发送。该设置包含在网页代码片段中。
• 显式控制：可随时手动启用或停止事件发送。例如，如果您设置了数据授权横幅（如Cookie授权弹窗），可以在横幅的控制逻辑中嵌入命令，来启动或停止事件发送。显式控制的优先级高于SDK初始设置，且第一方Cookie具有以下特征：
  • Cookie设置在网站域名下。
  • Cookie过期时间由Web SDK或浏览器决定；到期后，SDK会恢复至初始设置。
  • SDK设置的Cookie不会影响浏览器自身的Cookie规则。
     

SDK初始状态设置

显式控制

如果您的网站需要严格的安全或数据隐私协议，请使用以下机制配置Web SDK如何与您的环境和数据交互。

内容安全策略（CSP）

如果您的网站要求JavaScript通过CSP进行安全保护，Web SDK支持两种方法，具体取决于您的CSP配置。

• 使用self将https://websdk.appsflyersdk.com添加到您的script-src允许列表中。这适用于标准Web SDK和高级SDK验证。
• 使用nonce：如果您的策略使用script-src 'nonce-...'，您可以使用高级SDK验证的nonce扩展变体。这将nonce转发到验证过程所需的所有三个脚本标签。用您服务器生成的每个请求的nonce值替换{{CSP_NONCE}}。

下表显示了哪些CSP策略与nonce扩展变体兼容。

带有CSP nonce片段的高级SDK验证

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

如果您的查询参数包含您不希望AppsFlyer记录的数据，您可以要求AppsFlyer平台丢弃某些或所有查询参数。这些参数将不会出现在原始数据或报表中。 

您可以使用以下方法丢弃URL、referrer和header_referer查询参数。

查询参数丢弃选项

• 用户事件由SDK记录并发送到AppsFlyer平台。
• 根据市场人员设置的转化事件列表，AppsFlyer会将事件分为 标准事件和转化事件：
• 转化事件数据可在PBA面板中查看。
• 转化和标准事件数据可在原始数据报告中查看。

转化事件

• 转化事件能够帮助您洞察营销和业务成效，此类事件包括购买、下载、注册和订阅。
• PBA会将转化事件归因到驱动用户访问网站的媒体渠道。
• 通过识别被归因的媒体渠道，您可以评估并比较不同渠道带来的用户质量。
• 转化事件还可用于记录收入并计算ROI。
• 您可将广告在不同媒体渠道的投放成本与这些渠道带来的收入进行对比。

标准事件

• 标准事件主要用于验证带来最终转化的用户路径和漏斗。
• 标准事件可用来衡量用户活跃度，突出带来深度用户的媒体渠道。
• 记录的用户行为也能帮助您标记用户，以便后续进行再营销活动。

事件记录

在满足某些条件时触发Web SDK记录事件，例如，落地页加载时或用户与网页元素互动时。请参见事件记录示例。

• AppsFlyer通过您分配的唯一CUID对Web用户进行识别。通常CUID由您的后端服务器管理。 
• 建议使用与移动端相同的CUID，以便统一分析跨平台的用户行为。移动SDK中的函数为setCustomerUserId函数（iOS/span>，Android，Unity）。
• 在Web SDK中设置CUID：
  • 请在能够获取CUID后尽早设置。通常您需要等待用户通过登录或注册进行身份验证。
  • 触发JavaScript调用setCustomerUserId()的方法如下所示。
    请注意：即使CUID是数字，也必须以字符串形式传递（需加引号）。
• 如果使用Web S2S，可能需要在后端将CUID与Web访客ID关联后通知PBA。
• CUID不得包含可直接识别个人身份的信息，如手机号或邮箱。

示例：设置CUID

// Associate all current user web events to distinct ID 663274 
AF('pba', 'setCustomerUserId' , '663274')

示例事件

// purchase event of shoes with associated revenue
AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});

您需要发送的事件类型取决于网站的业务性质。例如：电商网站与新闻网站所需的事件类型可能有所不同。请参阅以下场景，以了解您应该在何时发送何种事件。

电商网站

假设您正在运营一家电商网站，您可能需要记录以下标准事件与转化事件： 

• 搜索：标准事件
• 加入购物车：标准事件
• 从购物车中移除：标准事件
• 购买：转化事件

新闻网站

假设您正在运营一家新闻网站，您可能需要记录以下转化事件：

• 注册：转化事件
• 购买订阅：转化事件

请网页开发人员参阅以下内容。

您可以通过实时查看测试事件，测试PBA Web SDK是否已正确对接。

操作步骤如下：

1. 打开网站。
2. 打开浏览器开发者工具。
   • 如何在Chrome中打开开发者工具
   • 如何在Safari中打开开发者工具
3. 切换到Network（平台）标签。
4. 触发事件。

5. 按消息筛选。

   

6. 查找发送到wa.appsflyer.com的网络请求。
7. 检查以下内容：
   1. Status code = 200。
   2. Request Payload与事件参数一致。

以下示例代码仅供参考，请勿直接使用。 

• 假设：在事件发送时，页面已经加载了Web 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>
<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>

• 确保Web SDK功能标签在事件触发前已加载。
• 不要在事件值中包含特殊字符（例如货币符号）。
• 事件值字符串应少于50个字符。

以下示例中的代码仅供参考。请勿直接使用。如不确定如何使用此代码，请咨询网页开发人员。

注意事项：确保Web SDK在事件触发前已加载；请勿重复加载SDK。

使用场景：

• 用户在您的网站上注册。
• 网站代码收集用户信息并发送到服务器。
• 服务器为用户生成唯一的CUID。
• 在注册完成后跳转的感谢页面中，网站通过服务器返回的结果获取该CUID。
• 借助服务器响应，使用Web SDK的 setCustomerUserId() 方法设置CUID。

<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.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>
        };
    // 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>

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

setCustomerUserId()函数可以在用户流程中的任意阶段调用，例如：用户登录或注册之后。AppsFlyer会使用最近一次发送的CUID来更新该用户，应用于过去或未来的触点和事件。

请在网页端使用与移动端应用（iOS、Android、Unity）中setCustomerUserId函数相同的CUID值。

您网站上Web SDK设置或使用的cookies如下表所示： 

缩写说明：

• AMP：Accelerated Mobile Pages（加速移动页面） 
• CDN：Content Delivery Network（内容分发网络）
• 3PC：Third-party Cookies（第三方Cookie）

• 弃用通知用于提前告知某个功能或方法即将停止支持。在正式下线之前，该功能或方法仍然可以正常使用。
• 建议您将弃用通知视为优化代码的契机，提前进行调整。