2.2、Launch操作界面

前面在媒体资源管理主界面直接点击对应的媒体资源即可进入其设置界面,也就是Launch的主要操作界面,具体的操作界面如下:

基本与媒体资源的操作界面相似,如头部和左侧的导航都是一样的,不同的是中部的菜单栏,这就是Launch的主要功能模块的了,所有的设置都是基于此:

Overview:预览,这个主要介绍Launch和提供Extensions、Data Elements和Rules的入口。

Rules:规则,这个主要是控制触发条件和发送数据。

Data Elements:数据元素,存储各种变量,被Rules和Extensions引用。

Extensions:插件或扩展,官方翻译成扩展,我一般称为插件,就是通过内置扩展去部署第三方的应用。

Adapters:适配器,连接Launch和服务器,决定Launch生成的配置文件放到哪里的。

Environment:环境,就是发布的环境,可以是开发、测试、线上。

Publishing:发布,发布审批流程管理。

其中Rules、Data Elements和Extensions是Launch设置的核心,而Adapter、Environment和Publishing是配置文件和审核相关的设置。

Working Library:在右上角,作用是快速将Launch提交到开发环境。

2.2.1 Overview(预览)

进入具体媒体资源的默认页面,这个页面是宣传和提供Extensions、Data Elements和Rules的入口,中间有一段Launch的介绍视频,是Youtube的链接,如果你是大陆地区直接访问会看不到,点击下面对应的按钮就就可以进入具体设置页面。

2.2.2 Rules(规则)

Rules,中文名为规则,Launch是基于Rules的一个Adobe Launch系统,Rules是Launch最核心的一个部分,它的作用是控制触发条件和执行动作,实现什么时候向哪里发送数据,Rules的作用集成了GTM里的触发器和代码的作用。

(1)Rules的组成

Rules由if……then……组成,很英文的写法,如果……就……,前面触发条件满足的时候就执行动作,if理解为Rules的触发条件,Then就是执行动作。

If包含有两个配置的选项,EVENTS和CONDITIONS。

EVENTS:中文名是事件,但这里应该理解成触发条件或触发器,就是当什么的时候,比如这里的EVENTS可以是点击、提交、下拉等各种行为。

EVENTS的设置界面如下:

Extensions:插件,表示Rules是基于哪个Extensions,一般使用的是Core,如果要做基于第三方插件的跟踪,那就需要选择第三方插件的。

Event Type:事件类型,就是哪种触发行为了,这里的Event Type是基于前面的Extensions,不同的Extensions会内置有不同的Event Type。

Name:名字就是Extensions-Event Type的组合,自动生成,一般不需要去改。

Order:顺序,控制触发优先级的,数值越低,越优先触发。

右侧具体的配置,是基于Event Type,不同的Event Type是不同,有些是没有的。

其中Core内置的Event Type的有很多,具体如下表:

大类

Event Type

作用

BROWERS

Tab Blur

标签转移,通过浏览器的标签从A页面切换到B页面,对A页面就是转移

Tab Focus

标签返回,通过浏览器的标签返回A页面

FORM

Blur

转移,将光标从表单输入框移走

Change

改变,修改已经输入的内容

Focus

定点,将光标移到表单输入框

Submit

提交,确认提交

KEYBOARD

Key Press

按键,按下键盘

MEDIA

Media Ended

媒体播放结束

Media Loaded Data

媒体数据加载

Media Pause

媒体播放停止

Media Play

媒体开始播放

Media Stalled

媒体服务器断开

Media Time Played

已经播放了多久

Media Volume Change

媒体音量调整

MOBILE

Orientation Change

旋转屏幕

Zoom Change

放大或缩小

MOUSE

Click

点击,鼠标点击

Hover

停留触发

Mousedown

鼠标按下

OTHERS

Custom Code

自定义代码

Custom Event

自定义事件

Data Element Change

数据元素改变

Direct Call

直接调用,特殊情况下的触发

Element Exists

元素存在

Enters Viewport

进入视口,就是看到某个东西

History Change

历史改变

Time On Page

页面停留时间

PAGE LOAD

DOM Ready

DOM准备就绪

Library Loaded (Page Top)

库加载(页面头部)

Page Bottom

页面底部

Window Loaded

窗口加载

直接点击EVENTS右侧的➕可以创建多一个EVENTS,多个EVENTS是表示OR的关系,只要其中一个触发就会被触发。

CONDITIONS:就是条件了,对前面的触发条件做限制,比如限定为某些页面的,某类用户,这有这些页面或用户才触发。

CONDITIONS的设置界面如下:

Logic Type:逻辑类型,一种是Regular,也就是满足规则的,可以理解为包含,另一种是Reception,就是排除。

Extensions:插件,这个要跟EVENTS保持一致。

Condition Type:匹配配型,就是用哪个字段去匹配。

Name,名字就是Extensions-Condition Type的组合,自动生成,一般不需要去改。

右侧具体的配置,是基于Condition Type,不同的Condition Type是不同,绝对不为空。

其中Core内置的Condition Type的有很多,具体如下表:

大类

Condition Type

作用

DATA

Cookie

Cookie

Custom Code

自定义代码

Value Comparison

值匹配

Variable

变量,

ENGAGEMENT

Landing Page

着陆页

New/Returning Visitor

新/回访用户

Page Views

页面浏览

Sessions

会话

Time On Site

网站停留时间

Traffic Source

流量来源

OTHER

Date Range

时间区间

Max Frequency

最大频次

Sampling

抽样比例

TECHNOLOGY

Browser

浏览器

Device Type

设备类型

Operating System

操作系统

Screen Resolution

屏幕分辨率

Window Size

窗口大小

URL

Domain

主域

Hash

哈希值

Path And Query String

路径和查询字段

Path Without Query String

路径没有查询字段

Protocol

网络协议

Query String Parameter

查询参数

Subdomain

子域

直接点击CONDITIONS右侧的➕可以创建多一个CONDITIONS,多个CONDITIONS是标识的AND的关系,表示多个条件同时做限制,都满足的时候才会触发。

Then里面只有ACTIONS,作用是Rules触发后执行什么,一个Then里面可以有多个ACTIONS,但不同ACTIONS之间的顺序是有要求的。

ACTIONS的设置界面如:

Extensions:插件,这里是触发的只是做什么操作,就是向哪里发送数据,控制数据发送的,比如像Adobe Analytics,Adobe Target,Adobe Audience Manager……具体取决于你的Extensions安装了哪些插件。

Action Type:这个Extensions有那些发送形式,依赖于Extensions。

Name,名字Extensions-Action Type的组合形式,自动生成,可以修改。

右侧具体的配置,是基于Action Type,不同的Action Type是不同。

(2)Rules的创建

点击Add Rule即可创建一个新的规则,设置的界面如图:

Enter a name就是输入一个规则的名字,这个自定义。

EVENTS:增加一个触发条件,EVETS是必须参数。

DONDITIONS:增加一个条件,对前面的EVENTS做限制,这个是可选参数。

ACTIONS:执行,触发的是时候做什么,这个是必须参数。

假设我们现在要配置Adobe Analytics,Rules就命名为Adobe Analytics Base Tracking Code。

EVENTS做如下配置:

这里用的Event Type是Library Load(Page Top)表示当页面头部加载到Adobe Launch的库文件的的时候就触发,就是页面被打开,加载到库文件。

CONDITIONS不用做配置,为空。

ACTIONS做如下配置:

这个设置的意思是表示通过Send Beacon的形式向Adobe Analytics发送数据,Tracking中:s.t()表示这次发送的数据作为一个PV,s.tl()表示这次发送的数据不作为PV,就是这次数据是否纳为交互的意思,跟GA的是否为交互类型一样,如果是交互类型,会纳入跳出率计算,如果是非交互,则不纳入。

配置后的Rules为:

(3)Rules的管理

Rules的管理界面如图所示,显示有Rules的Name(名字),LAST MODIFIED(最后修改日期)和STATUS(状态):

勾选对应Rules前面方框就可以对该Rule做调整:

操作类型有四个:

Enable:就是启用。

Disable:就是关闭,这里需要注意,如果这个Rules在线上正在使用的话,你是关闭不了的,需要将这个Rules撤销后才可以删除。

Copy,就是复制了。

Delete,删除,如果Rules正在使用,是删除不了的,需要先撤销这个Rules才可以删除。

如果要对Rules的配置做修改,直接点击该Rules即可进入修改设置修改界面。

2.2.3 Data Elements(数据元素)

Data Elements就是数据元素,是key-value结构,用于收集、组织和传递数据,被Rules和Extensions引用,跟GTM中的变量是一样的作用。Launch中的Data Elements内置有10种类型。

Data Element的设置界面如下:

Name:就是Data Element的名字,自定义。

Extension:基于哪个Extensions的,默认选Core,这个是基础通用的。

Data Element Type:数据元素的类型,默认的Core有10种。

Default Value:默认值的,这个可以用于测试,看是否数据正确传递。

Force Lowercase value:强制转为小写格式。

Clean Text:使用此选项可以标准化元素值以便于匹配。“清洁文本”选项从开头和结尾删除任何空格,并用单个空格替换中间的任何成功空格。就是自动去除多余空格的功能,建议勾选。

Storage Duration:就是保存期,有四种None、Page view、Session和Visitor,需要根据数据变量的生命周期选择不同的类型。

None:就是这个数据元素不存储。

Page view:这个数据变量跟着页面流量,用户访问不同的页面,每次都会更新,可能会不同,比如Title、UTL、Path这些。

Session:表示这个数据变量存在于浏览器的Session中,整个访问过程都可用,直到关闭页面。 一般是流量类的。

Visitor:表示这个数据变量跟Visitor绑定,一般是用户属性的数据,存储在local Storage。

设置好后点击SAVE即可。

Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的硬盘读取数据的一种技术。Cookies是当你浏览某网站时,由Web服务器置于你硬盘上的一个非常小的文本文件,它可以记录你的用户ID、密码、浏览过的网页、停留的时间等信息。当你再次来到该网站时,网站通过读取Cookies,得知你的相关信息,就可以做出相应的动作,如在页面显示欢迎你的标语,或者让你不用输入ID、密码就直接登录等等。

Cookie分为第一方Cookie和第三方Cookie,第一方Cookie就是自己主域名下的Cookie,第三方Cookie是其他第三方域名,第三方Cookie通常用于广告跟踪,但只有第一方Cookie能被Launch读入。

我们可以将第一方Cookie里面的一些信息传入到Launch面去,比如将Adobe Experience Cloud ID传递到Launch里面去,我们先在Cookie里面找到Adobe Experience Cloud ID:

可以看到Domain中是ichdata.com的Cookie就是第一方Cookie,其他的就是第三方Cookie,我们找到AMCV_开头的这个就是Adobe Experience Cloud ID,然后复制NAME里面的名字,就是这个Cookie的名字。

在Data Element中创建一个Data Element Type为Cookie 的数据变量,将Cookie的名字复制到Cookie Name,其他的设置如下图:

这样就将Adobe Experience Cloud ID 传递到Launch里面了,数据元素名为Cookie Experience ID,后面就可以在Rules或Extensions中引用。

(2)Custom Code

Custom Code,就是自定义代码,Data Element里的自定义代码支持JavaScript,每个自定义代码返回一个值,代码输入界面跟其他的输入界面一样,都会高亮提示错误。

跟GTM不同的是,你不需要将包封装在函数内部,但不支持$(this)方法。

运用Custom Code对字段做判断处理,如截断,分类。

(3)DOM Attribute

DOM Attribute的作用是从DOM中获取一些值,我们先来看一个例子,如下代码,现在的需求是需要获取id中的writer,该怎么操作呢?

<div class="g-momo">

<a id="writer" href="/About-me.html">关于作者</a>

</div>

我们可以通过CSS选择器去定位,如div > a 或.classy a定位锚点,告诉Launch找到这个位置,下一步就是告诉Launch去抓取什么的值,这里直接选择id,这个DOM Attribute就会返回writer,具体的设置界面如下:

Name:就是自定义这个数据变量的名字。

Extensions:默认选择Core。

Data Element Type:选择DOM Attribute。

From the DOM element matching the CSS Selector:CSS选择器,这个可以通过直接通过浏览器复制得到:将鼠标移动到需要跟踪的位置,然后点击右键审查,将光标定位到需要跟踪的位置,然后点击右键就会看到有CSS选择的,直接复制即可,不需要自己去找。

Use the value of:就是要获取什么属性的值,这里有id、href、class、src、alt、HTML、text、name、value、type、other attribute.

(4)JavaScript Variable

JS变量就是全局变量了,在页面用一个变量去存储,然后就可以通过这个数据元素去获取,跟GA是一样的,比如页面代码如:

<script>

var userid=“[email protected]”;

</script>

在Launch中新建一个JavaScript Variable类型的Data Elements做如下配置:

但JavaScript Variable对Launch或Adobe有另一层特殊的意义,它同时也是数据层变量,Launch的数据层本质就是js全局变量,这跟GTM中的数据层是完全不同的。

使用数据层的时候需要注意,数据层要在launch跟踪代码的前面,以便跟踪代码一加载的时候能获去相关的值。

(5)Local Storage

Local Storage,局部存储器。它是html5新增的一个本地存储API,所谓local Storage就是一个小仓库的意思,它有5M的大小空间,存储在浏览器中,我们可以通过js来操纵local Storage。解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)

Local Storage的优势

1、local Storage拓展了cookie的4K限制

2、local Storage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的

local Storage的局限

1、浏览器的大小不统一,并且在IE8以上的IE版本才支持local Storage这个属性

2、目前所有的浏览器中都会把local Storage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换

3、local Storage在浏览器的隐私模式下面是不可读取的

4、local Storage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

5、local Storage不能被爬虫抓取到

Local Storage在Cookie的上面,如下图:

Key下面所有的信息都是Local Storage的,假设现在需要将_tab_ids传递到launch该如何设置呢?

在Launch中新建一个Local Storage的Data Elements,然后将_tab_ids填到即可。

(6)Page Info

页面信息是Data Element自动获取的页面属性,方便用户使用的,比如https://www.ichdata.com/?utm_source=Admin&utm_medium=Admin&utm_campaign=Admin

URL:就是网址,这里就是:https://www.ichdata.com/index.html/?utm_source=Admin&utm_medium=Admin&utm_campaign=Admin

Hostname:主机名,对应的就是www.ichdata.com

Pathname:路径名,对应就是idenx.html

Protocol:网络协议,对应就是https

Referral:引荐流量,就是浏览器传递的上一级页面来源,这个是流量来源的基础。

Title:标题,这里就是“GA小站|领先的Google Marketing Platform和Adobe Experience Cloud经验分享平台”

(7)Query String Parameter

查询字符串参数,作用是将特定字符串的值传到Launch里面,如:

[[https://www.ichdata.com/?utm_source=Admin&utm_medium=Admin&utm_campaign=Admin]("https](https://www.ichdata.com/?utm_source=Admin&utm_medium=Admin&utm_campaign=Admin]%28"https):\)

里面的utm_source、utm_medium和utm_campaign都是查询字符串,要获取的是它们后面的值,Launch的设置如:

上面的示例的写法是Google Analytics的UTM写法,实际上Adobe的写法不是这样的,Adobe的写法一般是用cid,所有的广告渠道的数据都放到cid,后面可以自定义js去拆分它。

另一个需要注意的是:查询字符串参数类似就是截取,所以特殊字符最好不要用到URL上,如?、&或=,避免参数丢失。

(8)Random Number

随机数,生成一个特定区间的整型随机数,主要用于做AB测试的时候使用,设置的界面如:

你永远猜不到随机数的作用的,实际这个很少用到的。

(9)Session Storage

Session Storage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,Session Storage 与 local Storage 的接口类似,但保存数据的生命周期与 local Storage 不同,在关闭窗口或标签页之后将会删除这些数据。

Session Storage在浏览器的这个地方,其实就在cookie的上面,跟查看cookie的方法是一样的。

Key下面的字段就是存放在Session Storage的,关闭页面的时候就自动会清空了。

假设要将com.adobe.reactor.core.visitorTracking.pagesViewed传递到Launch里面改如何设置呢?

这个字段的意思是这个会话的PV是多少,就是看了多个页面。

在Launch里面新建一个Data Element,然后选择Session Storage,然后将com.adobe.reactor.core.visitorTracking.pagesViewed复制到Session Storage Item Name即可,具体的配置如:

然后点击SAVE保存即可。

Local Storage,Session Storage,Cookie的不同在于:

Local Storage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除local Storage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

Session Storage仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。

Cookie的生命期为只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。存放数据大小为4K左右。有个数限制(各浏览器不同),一般不能超过20个。与服务器端通信:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题。

(10)Visitor Behavior

访客行为,主要是跟常用访客相关的变量,如着陆页、流量来源、总会话数……直接使用系统内置的变量能降低你使用数据元素的错误,访客行为有以下变量:

Landing Page:着陆页,访客访问的第一个页面。

Traffic Source:来源,表示访客从哪里来的。

Minutes On Sites:在网站上停留了多少分钟。

Session Count:总的会话数。

Session Page View Count:

Lifetime Page View Count:

Is New Visitor:是否为新访客。

2.2.4 Extensions(插件/扩展)

插件就是拓展了Launch的 UI和客户端功能的代码包(JavaScript,HTML和CSS),可以通过直观的UI界面操作去构建,管理和更新插件。可以将Launch看作是一个操作系统,而插件是用来完成任务的应用程序。

(1)Adobe Extensions

(2)Third-Party Extensions

2.2.5 Adapter(适配器)

Adapter是连接Launch和库服务器,它作用是将构建好的库,上传到服务器的特定位置,起到上传的作用,这个是发布库必用到的,如果没有设置,配置不能发布。Adapter有两种:

一种是Managed by Adobe,即是akamai,构建好的库将会上传到官方提供的,具有CDN功能的域名assets.adobedtm.com里面,后面加载跟踪代码,配置文件,就会从这个域名加载。

一种是SFTP,SFTP是Secure File Transfer Protocol的缩写,安全文件传送协议。可以为传输文件提供一种安全的网络的加密方法。是上传到自己的服务器去,也就是后面加载跟踪代码,配置文件都是从自己的服务器上加载的。

同一个媒体资源下的Adapter能够被多个Environment共用,所以Adapter这里只需要配置一次后都不需要再去修改它。

(1)创建akamai

用Adobe的CDN网络是最方便的,点击Add Adapter即可创建,看到如下的界面:

Name自定义,Type选择Managed By Adobe,保存即可。

(2)创建SFTP

点击Add Adapter,然后Type选择SFTP,然后就可以看到如下:

SFTP是将库上传到自己服务器的特定位置的,所以需要服务的账号、密码、端口和路径才可以。

这种方式比较适合大陆地区,因为屏蔽的问题,出现部分地区加载不到跟踪代码的情况,如果能将库放到自己的服务器,就不存在加载不到跟踪代码的问题。

(3)Adapter的管理

勾选对应Adapter前面的框,就可以看到对Adapter的管理只有删除一个选项。

2.2.6 Environment(环境)

Adobe对Environment的定义是:每一个库都是在环境中创建,环境定义了构建发布时的基础,一旦保存环境,它就是生成一段可嵌入代码,你可以复制并黏贴到你的网站上去。

Launch中默认有三种环境,对应的是系统开发的三个阶段:开发->测试->线上,三种环境是给不同角色的人使用的,目的是为了降低发生出去的可能性,其中线上环境也就是通常说的真实环境。

Development:开发环境,进行配置和调试,实现功能。

Staging:测试环境,进行功能测试,数据调试等,确保没有bug。

Production:线上环境,发布到线上做数据收集。

每一个Environment都有一段跟踪代码,需要部署到对应的环境去。

(1)创建Environment

点击右上角的Add Environment即可看到如下图:

可以看到只能选Development,这是因为一个Property可以有多个Development环境,但只能有一个Staging和一个Production环境,我都已经各创建了一个环境了。

选择Development后可以看到:

Name就是环境的名字,这个自定义。

Select Adapter,选择Adapter的类型,这里就需要选择前面创建的Adapter的,这里选择是用官方的。

Create archive,这是如果你将代码部署到自己服务器的时候可以勾选这个去下载生成的库。

然后点击Save保存即可。

(2)安装Environment

在Environment的主界面点击INSTALL下的图标:

就可以获取对应环境的代码:

将该段代码复制部署到对应的站点页面的head里面即可。

(3)管理Environment

勾选对应Environment前面的框,就可以看到对Environment的管理只有删除一个选项。

2.2.7 Publishing(发布管理)

开发到正式上线的流程:应该是先在开发环境中开发完成,测试环境测试,保证程序没有问题后,再上传到线上环境中。

在发布管理过程中有Development、Submitted、Approve,Published。

Development:开发就是将开发好的库打包。

Submitted:确认,这一步其实是测试,测试后就确认,提交给上一级去审批。

Approved:审批,测试过后检查没问题就可以审批通过发布到线上去。

Published,已发布,就是线上的。

发布管理的界面如下,不同权限的人可以操作的环节是不同的,权限的授予不是在Launch上完成的,而是在Admin Console,跟Adobe Experience Cloud一样在Admin Console统一管理,关于Launch权限管理的看第一章的内容。

(1)Development(开发)

开发就将Launch上配置好打包成库,可以点击Add New Library,可以点击+,可以点击右上角的Working Library(这个没有在截图中展示)。

创建后可以看到如下的配置界面:

Name:是库的名字,一般是日期和功能的形式,如20190505-Event Tacking。

Environment:环境的选择,这里是开发,所以选取的一定是开发环境。

UPSTREAM RESOURCES:就是目前线上的已经生效配置,这里的Resource是指Rules,Data Element和Extensions。

NEW RESOURCES:新资源,就是这次开发需要添加的,有两种添加方式,Add a Resources和Add All Changed Resource。

Add a Resources:添加一些Resources,就是可以自定义选取部分。

Add All Changed Resource:将所有有变更的都添加上去。

Activity Log,提交的记录,如果报错,需要从这里去找原因。

Save & Build for Development,保存并提交到开发环境。

配置好久点击Save & Build for Development,如果成功,没有报错会在Activity log中看到succeed的提示,在Development中可以看到:

自己在开发环境测试没问题的话,将鼠标移到向下的箭头,然后选择Submit for Approval,提交到测试环境。

(2)Submitted(测试)

测试环境中看到有就需要测试的:

点击Build for Staging,提交到模拟环境去测试。

测试的同事,测试没问题后就可以提交给上一级去审批,操作如下,点击Approve for Publishing:

(3)Approve(审批)

(4)Published(线上)

Published表示已经发布到线上的版本,上面会有发布时间和版本名字,也可以进入去看具体这个版本发布了哪些配置。