智能横幅

网站在获取新的移动用户时经常被忽视的，但可能也会是丰富的资源。

AppsFlyer的智能横幅可以为您的网站创建动态的banner广告，从而将用户吸引到移动端App。

智能横幅首先需要在网站上集成AppsFlyer的智能横幅SDK，在完成网站上的初始配置之后，无需其他的代码操作。

通过使用智能横幅，您就可以了解到移动网站用户带来的安装转化质量如何。这些用户的渠道会显示为 af_banner。

这篇文档会介绍如何在您的移动网站上实现智能横幅广告。

注意

不确定智能横幅是否适合您？请参考智能横幅与其他AppsFlyer解决方案的比较。

智能横幅、广告素材、网站

每个广告素材都是与特定的OneLink模板关联的，因此同一个banner也可以为不同的app服务。
每一个智能横幅可以包含不同的广告素材，您可以根据需求进行切换，但是每个横幅每次只可以激活一个广告素材。
如果你希望在多个网站上展示相同app 的广告素材，那么也可以选择特定的广告素材，即使这个素材没有被激活。

1. 配置智能横幅

在AppsFlye后台，点击菜单中的互动与深度链接 >智能横幅。

2. 第一次创建智能横幅

2.1 先决条件

智能横幅可以根据用户的设备类型，将您的移动网页用户导向相应的应用商店页面。为此，您需要先为推广的应用创建OneLink模板。

如果您的账户还没有定义过OneLink模板，那么当进入到智能横幅页面时，会看到一条消息提示您创建一条OneLink。
那么在继续创建横幅之前，需要先完成OneLink的配置。

2.2创建您的第一条智能横幅

点击 创建智能横幅。
在弹窗中输入横幅的名称。
复制横幅的Code Snippet代码段。发送给您的开发者，在网站中嵌入。
点击继续添加广告素材。

3. 添加和编辑横幅

智能横幅页面包含了在您AppsFlyer账户中定义好的所有横幅。

在这个页面您可以：

添加更多的横幅 - 点击创建智能横幅。
编辑横幅 - 点击您想要编辑的横幅名称。
添加更多的广告素材 - 点击相关横幅的添加广告素材。
复制横幅密钥 - 是AppsFlyer中标识横幅的唯一密钥。
获取每一个横幅的SDK Code Snippet代码段 - 点击相关横幅右上角的代码图标< / >，横幅的唯一密钥是包含在Code Snippet代码段中的。
删除横幅 - 重要：删除横幅会删掉它的全部广告素材。

提示：如果您已经为网站配置了智能横幅，那么建议您选择已有的智能横幅并添加或编辑广告素材。尽管只有一个广告素材可以被激活，您仍可以通过show bannerAPI来选择展示哪一个广告素材。

4. 编辑横幅页面 / 广告素材列表

编辑横幅页面会显示：

横幅详细信息 - 这里您可以更改智能横幅的名称，或获取横幅密钥和Code Snippet代码段。
广告素材列表 - 这里是该横幅配置好的所有广告素材的列表。将鼠标悬停在Actions上可以选择编辑广告素材、激活/解除激活、获取它的广告素材ID，或者删除它。

请注意每个智能横幅广告一次只能激活一个广告素材，但是您也可以选择通过 show bannerAPI来显示一个未被激活的广告素材。

重要：编辑已激活的广告素材会影响到真实环境。

5. 创建新的广告素材

5.1 选择一个模板样式。

点击添加广告素材。
选择一个模板样式：标准，增强或推广。您之后也可以随时更改。

5.2 设置广告素材的外观

请填写如下内容：

广告素材名称
(可选)广告素材样式
横幅位置： 即横幅在移动设备上的显示的位置
，请参考这里关于如何将横幅放置在其他页面位置。
标题：广告的标题
(可选)描述：广告的描述
Call to action text:：横幅的按钮选项
- 输入文字
- 选择文字的颜色、背景、边框和关闭icon(x)。
App图标：粘贴 App图标的URL。注意：大的图像会影响横幅的加载时间。支持的图片格式为.png或.jpg
。提示：如果图片URL无效，横幅也将无法生成。
背景：请执行以下操作之一
- 粘贴横幅背景的URL注意：使用jpg或png，但不要使用 webp。webp格式在Safari中不支持。
  注意：如果背景图片的URL无效，横幅也将无法生成。
  或
- 设置背景颜色。
(可选)评分和评论，此选项适用于标准和增强模板。
- 设置您App的评分的静态值，使用 + 或 - 按钮来设置数字或星级。
- 设置评分星级的颜色。
- 输入广告显示的用户评论数的静态值，您可以在数字后添加“评论”等词。
点击下一步。

5.3 设置广告行为

选择OneLink模板。
如果智能横幅是用于深度链接广告，并且您希望用与OneLink模板中不同的URI scheme的话，请在移动深度链接URL框中填写具体的URI scheme。
为横幅选择解除行为。一旦某个用户关掉这个横幅，解除行为的值决定了直到横幅广告可能再次展示给用户的时间段。
选择横幅的频率上限。频率上限决定了横幅广告可以向每个独立用户展示的次数。例如，如果频次上限设置为3次，并且用户访问了您的网站4次，那么用户会在前3次看到横幅广告，但不会在第4次看到。您可以更改频次上限或者禁用它。
点击下一步。

5.4 设置广告归因

输入广告系列的名称。
(可选)您可以添加其他归因参数，以便之后进行更加深入的数据分析。
如果智能横幅是用作重定向广告，请添加 is_retargeting作为自定义参数，并且将值设置为true。这会将 is_retargeting = true 这个参数添加到OneLink URL中。
点击创建。

5.5 激活广告素材

完成广告素材的配置后，系统会询问您是否要激活广告素材。激活广告素材意味着它将成为您移动网站上默认展示的广告素材。

每次只可以有一个广告素材被激活。如果有多个广告素材并且您需要更改激活的素材，可以在广告素材编辑页面中进行操作。

您仍然可以使用智能横幅展示未激活的广告素材。需要做的就是将未激活的广告素材的ID传给show banner API。点击此处了解详情！

5.6 测试页面

一旦新的广告素材配置好，在将它上线展示给用户之前，可以先进行测试。

将
点击生成。
使用生成的链接或二维码来测试您的横幅广告。这条链接或二维码应该会帮您跳转到网站页面，并且展示出包含广告素材的横幅广告。
点击 编辑广告素材 返回素材配置，或点击完成保存广告素材。

AppsFlyer提供智能横幅SDK，广告主可以将其嵌入自己的网站中。SDK的目的是获取到动态展示智能横幅所需要的全部数据，智能横幅SDK还会自动生成归因链接，您无需再手动生成。

因此， 应该可以从所有展示了移动横幅的页面访问智能横幅SDK。

智能横幅SDK使用唯一的横幅密钥进行验证，密钥您可以从横幅SDK代码段或者从智能横幅列表中获取。

每个网站也中只能展示一个横幅广告，同一个页面上展示多个横幅广告是不可以的。

Code snippet代码段

将此代码段包含在展示移动横幅广告的每个页面的<head>tag中。

代码

        <script>
          !function(e,n,t){!function(e,n,t,r,a){
          var s=(e[n]=e[n]||{})[t]=function(){(s._q=s._q||[]).push(Array.prototype.slice.call(arguments))};
          s.webkey=a;
          for(var i=0;i<r.length;i++)
s[r[i]]=function(n)
          {return function()
          {var e=Array.prototype.slice.call(arguments);
return e.unshift(n),(s._q=s._q||[]).push(e),s}}
(r[i])}(e,"AF","Banner",["showBanner","hideBanner","disableBanners","disableTracking","setAdditionalParams"],t),
          function(e,n,t){var r=e.createElement("script");
          r.type="text/javascript",r.async=!0,r.src=n+(t?"?webkey="+t:"");
          var a=e.getElementsByTagName("script")[0];
          a.parentNode.insertBefore(r,a)}(n,"https://cdn.appsflyer.com/web-sdk/banner/latest/sdk.min.js",t)}(window,document,"YOUR-BANNER-KEY");
window.AF.Banner.showBanner();
</script>

使用Google Tag Manager添加SDK

您可以使用Google Tag Manager (GTM)来将智能横幅的SDK添加在您的网站中。请按照以下说明操作：

Google Tag Manager

在GTM中，创建一个新标签。
给标签命名，点击Tag Configuration并选择Custom HTML。
在HTML框中，粘贴SDK代码段。用您实际的横幅广告key来替换代码段中的 YOUR-BANNER-KEY。
点击Triggering并点击右上角的加号创建一个新的trigger。
给这个trigger命名，点击Trigger Configuration并选择Page View。
如果您希望横幅展示在所有页面上，请选择All Page Views。如果您希望横幅展示在所选的页面上，请选择Some Page Views并且定义触发这个tag的条件。想了解更多关于triggers的信息，请参考GTM's documentation。
点击右上角的Save进行保存。
现在您会回到tag配置的页面。确定全部都已配置好的话，点击右上角的Save进行保存。
发布您的GTM container。

SDK功能

Showbanner(options:{})

功能目的：

根据代码段中提供的横幅key开始展示智能横幅。

参数(可选)：

如果传送bannerContainerQuery
这个参数，SDK会尝试用这个query在页面中寻找原素，并将其视作展示横幅位置的入口点。否则会使用document.body 。
如果传送additionalParams
，这些参数会被作为query参数添加到横幅URL中。或者，您可以在showbanner方法之前调用 setAdditionalParams。无论是使用options对象，还是通过setAdditionalParams方法，在每个横幅展示之后additionalParams这个对象都将会被重置。
creativeId
默认情况下，横幅广告会展示激活了的广告素材。您也可以传送不同的creative ID来覆盖默认行为。使用时，SDK会尝试通过ID来定位指定广告素材。如果找到了这个ID，则不管这个广告素材在后台是否激活，都会被展示出来。如果没有找到这个ID，则不会展示这个横幅。

示例：

showBanner({ bannerContainerQuery: "#container-id", 
creativeId: your_creative_id, additionalParams: { p1: "v1", p2: "v2"...}})

hideBanner()

功能目的

从页面中程序化地删除任何展示的横幅广告，例如，在展示后的X秒后。

disableBanners()

功能目的

禁用web SDK展示横幅广告并与AppsFlyer服务器通信。

disableTracking()

功能目的

禁用web SDK并且清除浏览器收集信息的痕迹（例如，本地存储，cookies等）。

setAdditionalParams(params:{})

功能目的

在调用showBanner之前，将additionalParams设置为OneLink。这些参数会被添加在横幅后的OneLink URL中。

参数

Params
key/value参数的映射，可以覆盖之前存在后台的任何归因链接中的参数(除了pid值)。

用法示例

您希望使用特定的参数来区分不同的落地页。为此，您可以在横幅后的OneLink中添加额外的参数。当用户点击横幅后安装了您的app，OneLink中的参数将显示在原始数据中供您分析。下面的代码示例为af_sub1参数的使用。

// call this method before calling showBanner()
setAdditionalParameters('af_sub': 'custom_paramter_value')

最终OneLink的格式为：subdomain.onelink.me/onelink-id?pid=af_banner&c=campaign&af_sub1=custom_paramter_value.

子域名和OneLink ID是从OneLink template中获取的。

例如：ab12.onelink.me/xyz1?pid=af_banner&c=summer_campaign&af_sub1=uk_landing_page.

您可以使用所有有效的参数。关于归因链接参数的更多详细信息，请参考这里。请确保不要覆盖pid和c参数，因为它已经存在与横幅后面的归因链接中了。

getAdditionalParams()

功能目的

获取目前的 additionalParams对象。

注意

智能横幅、广告素材、网站

1. 配置智能横幅

2. 第一次创建智能横幅

2.1 先决条件

2.2创建您的第一条智能横幅

3. 添加和编辑横幅

4. 编辑横幅页面 / 广告素材列表

5. 创建新的广告素材

5.1 选择一个模板样式。

5.2 设置广告素材的外观

5.3 设置广告行为

5.4 设置广告归因

5.5 激活广告素材

5.6 测试页面

Code snippet代码段

代码

使用Google Tag Manager添加SDK

Google Tag Manager

SDK功能

Showbanner(options:{})

功能目的：

参数(可选)：

示例：

hideBanner()

功能目的

disableBanners()

功能目的

disableTracking()

功能目的

setAdditionalParams(params:{})

功能目的

参数

用法示例

getAdditionalParams()

功能目的

此组别内的文章

页面内容：

智能横幅

注意

智能横幅、广告素材、网站

1. 配置智能横幅

2. 第一次创建智能横幅

2.1 先决条件

2.2创建您的第一条智能横幅

3. 添加和编辑横幅

4. 编辑横幅页面 / 广告素材列表

5. 创建新的广告素材

5.1 选择一个模板样式。

5.2 设置广告素材的外观

5.3 设置广告行为

5.4 设置广告归因

5.5 激活广告素材

5.6 测试页面

Code snippet代码段

代码

使用Google Tag Manager添加SDK

Google Tag Manager

SDK功能

Showbanner(options:{})

功能目的：

参数(可选)：

示例：

hideBanner()

功能目的

disableBanners()

功能目的

disableTracking()

功能目的

setAdditionalParams(params:{})

功能目的

参数

用法示例

getAdditionalParams()

功能目的

此组别内的文章

相关文章

页面内容：