市场人员专用的智能横幅网页代码添加指南

推荐用于
营销人员 营销人员 开发商
最近更新：

概要：本文讲解了如何将智能横幅代码添加到您的网站中，从而将网站流量转化为移动应用的用户。

 注意

AppsFlyer智能横幅网页SDK v1已于2023年11月8日下线。如需在您的网站中展示智能横幅，请升级到v2。了解详情

网页代码添加方式

本文旨在帮助市场人员通过以下方式在其网站中添加智能横幅代码：

  • Google Tag Manager（GTM）
  • Adobe Launch Tag Manager
  • Shopify
  • Wix
  • Squarespace
  • WordPress

如需通过其他平台在网站中添加代码，或根据具体需求修改代码（包括添加参数、深度链接、隐藏横幅或结合PBA使用智能横幅等），请参考开发人员专用的智能横幅网页代码添加指南。

请按以下步骤在您的网站中添加智能横幅代码：

  1. 按照网站配置中心指南获取智能横幅代码。
  2. 请参考以下各个分平台指南，按所述步骤将代码添加到您的网站中：

Google Tag Manager

请按以下步骤通过Google Tag Manager添加代码：

  1. 在GTM中，创建一个新标签。
  2. 为标签命名，点击Tag Configuration并选择Custom HTML。
  3. 将智能横幅代码片段粘贴到HTML字段框中。请将代码片段中的YOUR-BANNER-KEY改成您实际使用的横幅密钥。
  4. 点击Triggering并点击右上角的加号创建一个新的trigger。
  5. 为该trigger（触发条件）命名，然后在Trigger Configuration下选择Page View。
  6. 如果您想要在所有页面展示横幅，请选择All Page Views。如果您想要在选定页面上展示横幅，请选择Some Page Views，并定义触发这个tag（标签）的条件。关于trigger的详细信息请见GTM的trigger说明文档。
  7. 点击右上角的Save进行保存。
  8. 返回tag配置页面。确认所有内容都已配置完毕，然后点击右上角的Save进行保存。
  9. 发布您的GTM Container。

Adobe Launch Tag Manager

请按以下步骤通过Adobe Launch Tag Manager添加代码：

第1步：在Adobe Experience Cloud后台创建一个Property（即标签）。

请按以下步骤创建property（标签），用于托管智能横幅代码：

  1. 进入Adobe Experience Cloud > Launch。
  2. 点击Adobe Experience Cloud Launch下的Go to Launch。
  3. 点击New Property。
  4. 为您的property命名。
  5. 选择Platform下的Web。
  6. 输入您的网站域名。
  7. 点击保存。

第2步：将智能横幅代码添加到Adobe Launch property中

请按以下步骤在标签中添加智能横幅代码：

  1. 在My web property页面中，选择Rules选项卡。
  2. 为该规则命名。推荐名称：AppsFlyer Smart Banners。
  3. 在If部分，点击Events下的+Add。
    • 在Event Type下选择Core - DOM Ready。
    • 点击Keep Changes。
  4. 在Then部分，点击Actions下的+Add。
    • 在Action Type下，进入Custom Code。
    • 选择JavaScript > Open Editor，将不带<script>标签的智能横幅SDK代码片段粘贴到编辑器中。
    • 点击Keep Changes，关闭代码编辑器。
  5. 点击保存。

第3步：将Adobe Launch标签添加到您的网站中

请按以下步骤将Adobe Launch标签添加到您的网站（即加载智能横幅代码的网站）：

  1. 在My web property页面中选择Environments选项卡。
  2. 找到您想要发布的环境（Development或Production）所在的那一行。
    • 在激活标头下，点击相关行的方框图标；通常是Production环境。
    • 有关发布Adobe Launch环境的详细信息，请见下一小节内容。
  3. 在Web Install Instructions对话框中执行以下操作：
    • 复制脚本代码片段。
    • 关闭对话框。
  4. 将代码片段粘贴到网站的<head>标贴中。

第4步：发布Adobe Launch环境

请按以下步骤发布相关环境，以激活Adobe Launch标签：

  1. 从My web property进入Publishing选项卡。
  2. 在Development部分下点击Add New Library。
    1. 为该Library命名并选择一个环境。
    2. 在Resource Changes下，点击Add a Resource。
    3. 点击Rules > Load Smart Banners > Latest > Select & Create a New Revision。
    4. 点击保存。
  3. 在Development部分下执行以下操作：
    1. 点击新创建的library旁边的操作菜单（以3个点表示），并选择Build for Development。
    2. 再次点击操作菜单，并选择Submit for Approval。
  4. 在Submitted部分下执行以下操作：
    1. 点击操作菜单并选择Build for Staging。
    2. 再次点击操作菜单并选择Approve for Publishing。
  5. 在Approved部分下，点击操作菜单并选择Build & Publish to Production。
    至此，该流程操作完毕。

接下来，当您在移动设备上打开您的网站时，网页就会展示横幅的活跃素材。如果您想要在指定页面中显示横幅，或通过特定的用户行为触发横幅，请参考Adobe Launch规则。

Shopify

请按以下步骤在您的Shopify网站中添加智能横幅代码：

  1. 从Shopify后台进入Sales Channels > Online Store > Themes。
    界面会显示当前主题。
  2. 点击Actions > Edit code。
    打开当前主题的代码编辑页面。
  3. 在Layout文件夹中，点击以{/} theme开头的文件。
    界面显示网页代码。
  4. 将智能横幅代码粘贴到在代码正下方的<head>下。

Wix

请按以下步骤将智能横幅代码添加到您的Wix网站中：

  1. 进入您的Wix面板，点击Settings。
  2. 在“Settings”页面的“Advanced”部分中，点击Custom code。
  3. 点击+ Add Custom Code。
  4. 将智能横幅代码粘贴到Paste the code snippet here方框中。
  5. 在“Name”字段框中输入您的代码名称。建议名称: AppsFlyer Smart Banners。
  6. 在Add Code to Pages部分，选择横幅展示页面。请在以下两项中任选一项：
    • All pages（所有页面）
    • Choose specific pages（选择特定页面）
  7. 点击Apply。
    正常情况下，“Custom Code”页面会显示您的代码。请确保代码位于Head部分。

Squarespace

请按以下步骤在您的Squarespace网站中添加智能横幅代码：

  1. 进入您的Squarespace面板，点击Website。
  2. 点击Settings。
  3. 点击Advanced。
  4. 点击Code Injection。
  5. 将智能横幅代码粘贴到Header中。
  6. 点击保存。

WordPress

请按以下步骤在您的WordPress网站中添加智能横幅代码：

  1. 进入您的WordPress面板，点击Appearance > Theme Editor。
    打开Edit Themes页面，页面中会显示您网站的CSS代码。
  2. 在Theme Files下，点击Theme Header (header.php)。
  3. 界面显示代码，将智能横幅代码粘贴到代码中的<head>下方。
  4. 点击Update File。

另请参见