网站在获取新的移动用户时经常被忽视的，但可能也会是丰富的资源。
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无效，横幅也将无法生成。
或 - 设置背景颜色。
- 粘贴横幅背景的URL注意：使用jpg或png，但不要使用 webp。webp格式在Safari中不支持。
- (可选)评分和评论，此选项适用于标准和增强模板。
- 设置您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对象。