<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)));
  };
  // Replace WEB_DEV_KEY with your Web SDK ID
  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;
  // Replace WEB_DEV_KEY with your Web SDK ID
  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)));
  };
  // Replace WEB_DEV_KEY with your Web SDK ID
  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;
  // Replace WEB_DEV_KEY with your Web SDK ID
  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)));
  };
  // Replace WEB_DEV_KEY with your Web SDK ID
  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)));
  };
  // Replace WEB_DEV_KEY with your Web SDK ID
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

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

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

在所有页面中执行以下操作：

1. 在第2步的代码片段中，将WEB_DEV_KEY替换为您的Web SDK ID（如适用，还需替换YOUR_BANNER_KEY）。
2. 将代码片段粘贴到网站标签内靠近开头的位置。

使用GTM优先级设置，让SDK在页面加载后尽快加载；每次加载页面时，只加载一次SDK。

1. 打开Google Tag Manager。
2. 新建AppsFlyer Web SDK代码。
3. 选择自定义HTML代码类型。
4. 为代码指定一个清晰易懂的名称。
5. 将第2步中的代码片段粘贴到代码配置中。
6. 点击保存。
7. 添加触发器：
   • 针对所有网页：
     1. 点击添加触发器。
     2. 选择所有网页。
     3. 点击保存。
     4. 输入代码名称，然后点击保存。
   • 针对特定网页：
     1. 点击保存代码。
     2. 在GTM主窗口中，选择触发器。点击新建。
     3. 点击铅笔图标。
     4. 选择网页浏览触发器类型。
     5. 选择某些网页浏览。
     6. 根据需要设置网页和触发条件。
     7. 点击保存。
     8. 将触发器与AppsFlyer Web SDK代码关联：
        1. 在GTM主窗口中，选择代码。
        2. 选择之前创建的代码。
        3. 在触发条件面板中，点击铅笔图标。
        4. 选择之前创建的网页浏览触发器。
        5. 点击保存。

在Adobe Experience Cloud中创建属性

1. 打开Adobe Experience Cloud>Launch。
2. 在Adobe Experience Cloud Launch中，点击转到Launch。
3. 点击新建属性。
4. 输入属性名称。
5. 在平台下，选择网页端。
6. 输入网站域名。
7. 点击保存。

将代码片段添加到Adobe Launch属性

1. 在我的网页端属性页面中，选择规则选项卡。
2. 输入规则名称。建议名称：加载Web SDK。
3. 在如果部分的事件下，点击添加。
   • 在事件类型下，选择Core–DOM已就绪。
   • 点击保留更改。
4. 在然后部分的操作下，点击添加。
   • 在操作类型下，选择自定义代码。
   • 选择JavaScript>打开编辑器，然后粘贴第2步中的代码片段（不要包含任何外层封装代码行）。
   • 点击保留更改，关闭代码编辑器。
5. 点击保存。

将Adobe Launch标签添加到网站

1. 在我的网页端属性页面中，选择环境选项卡。
2. 找到要发布的环境所在行（开发或生产环境）。
3. 在安装列中，点击相应行的方框图标。
4. 在网页端安装说明对话框中，复制脚本代码片段并关闭对话框。
5. 将代码片段粘贴到网站的head部分。

发布Adobe Launch环境

1. 在我的网页端属性页面中，前往发布选项卡。
2. 在开发部分下，点击添加新库。
   • 输入库名称并选择环境。
   • 在资源更改下，点击添加资源。
   • 点击规则>加载Web SDK>最新>选择并创建新修订版本。
   • 点击保存。
3. 在开发部分下：
   • 点击新建库旁的操作菜单（三点图标），然后选择生成到开发环境。
   • 再次点击操作菜单，然后选择提交以供审批。
4. 在已提交部分下：
   • 点击操作菜单，然后选择生成到暂存环境。
   • 再次点击操作菜单，然后选择批准发布。
5. 在已批准部分下：
   • 点击操作菜单，然后选择生成并发布到生产环境。

事件是网页端效果衡量的基础，用于表示对您业务具有价值的具体用户操作。要记录这些互动，需为每个事件定义相应的逻辑和参数，并正确地将收入、自定义元数据等事件参数传递至AppsFlyer平台。

事件示例（包含相关收入的购买事件）

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

对于最终跳转至感谢页面或确认页面的转化，通常采用这种方式记录事件。

您可以通过以下任一方式实现该触发器：在原生JavaScript中添加窗口加载方法，或在Google Tag Manager中配置网页浏览触发器。

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

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

使用这种方式追踪无需重新加载页面的操作（点击按钮、下载、添加到购物车）。

通常可通过以下方式处理此类互动：为原生HTML元素绑定点击监听器，或使用Google Tag Manager变量，根据特定元素ID或CSS选择器识别并衡量互动。

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

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

为保证数据准确并成功发送，请注意以下技术要求：

• 加载顺序：调用任何事件前，Web SDK函数代码必须已在页面作用域中完全加载。
• 数据格式：事件值中不得包含特殊字符。例如，收入应使用数值，不要包含货币符号（使用10.50，而非$10.50）。
• 字符串长度限制：尽量缩短event_value字符串；超过4000个字符的值将被截断。

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

前提条件：发送事件前，页面已加载Web SDK；请勿重复加载。

用户场景：

• 用户在网站中注册。
• 网站代码收集用户信息并发送至服务器。
• 服务器为用户生成唯一CUID。
• 用户进入注册完成后的感谢页面后，网站会向服务器查询新CUID。
• 根据服务器返回的响应，使用Web SDK的setCustomerUserId()方法设置AppsFlyer CUID。

注册表单示例

以下代码是一个简单的注册表单。提交表单后，邮箱地址会存储在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，该值随后会通过setCustomerUserId方法传递。

<html>
<head>
    <script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyersdk.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        window.onload = function () {
            var userEmail = localStorage.getItem('user_email');
            fetch('users/' + userEmail).then(function (res) {
                res.text().then(function (id) {
                    console.log(id);
                    AF('pba', 'setCustomerUserId', id);
                });
            });
        }
    </script>
</head>
<body>
    <h1>Thank You for Signing Up!</h1>
</body>
</html>

1. 设置注册页面。

   以下代码示例是一个简单的注册表单。提交表单后，邮箱地址会存储在localStorage中。用户进入感谢页面后，系统会将其邮箱地址发送至服务器，以获取该邮箱地址对应的唯一CUID。

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

2. 为完成注册的用户设置感谢页面。以下代码用于感谢页面，其中的GTM触发器会将用户在注册表单中填写的邮箱地址发送至服务器。假设服务器会在用户注册时创建用户并生成唯一CUID，将邮箱地址发送至服务器后，即可获取该CUID。服务器返回唯一CUID，该值随后会通过setCustomerUserId()方法发送。

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

3. 添加一个新代码，用于在感谢页面加载后归因订阅事件。

   

4. 为代码指定一个易于区分的名称，并选择自定义HTML代码类型。

   

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

5. 展开文本区域下方的高级设置和代码排序，并将其配置为在此代码执行后触发转化。

   

6. 为转化代码设置触发器，指定转化代码的触发时机（以下示例会在「感谢」页面加载时触发）。

   

您可以通过以下两种方式控制效果衡量：

SDK初始状态设置（在代码片段中）

用于决定网页首次加载时，SDK是立即发送事件，还是等到您明确发出指令后再开始发送。此设置在网页端代码片段中定义。

• 发送事件：{pba: {webAppId: "...", measurementStatus:true}}
• 不发送事件：{pba: {webAppId: "...", measurementStatus:false}}

显式控制

显式控制的优先级高于初始状态设置，并通过第一方Cookie持续保存设置：

• Cookie设置在您的网站域名下。
• Cookie会在Web SDK或浏览器设定的期限后过期。
• Cookie始终受浏览器Cookie设置限制。

命令

• 开始发送事件（选择发送）：window.AF_SDK.PLUGINS.PBA.enableMeasurement()
• 停止发送事件（选择不发送）：window.AF_SDK.PLUGINS.PBA.disableMeasurement()

如果网站需要遵循严格的安全或数据隐私协议，请使用以下机制配置Web SDK与运行环境及数据的交互方式。

内容安全策略（CSP）

如果网站要求通过CSP保护JavaScript，Web SDK可根据您的CSP配置和第2步所选的代码片段采用以下两种方案。

• 使用self的CSP：将https://websdk.appsflyersdk.com添加到script-src允许列表中。标准Web SDK和高级SDK验证均支持这种方式。
• 使用nonce的CSP：如果您的策略使用script-src 'nonce-...'，请使用下方支持nonce的高级SDK验证扩展版本。该版本会将nonce传递给验证流程所需的全部3个脚本标签。将{{CSP_NONCE}}替换为服务器针对每个请求生成的nonce值。

下表列出了与nonce扩展版本兼容的CSP策略。

使用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)));
  };
  // Replace WEB_DEV_KEY with your Web SDK ID
  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)));
  };
  // Replace WEB_DEV_KEY with your Web SDK ID
  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