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

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

 相关文章

下列文章能帮助您更全面地掌握智能横幅的用法:

网页代码添加方式

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

  • 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 > LatestSelect & 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
这篇文章有帮助吗?

评论

0 条评论

登录写评论。