上一篇介绍了 DTM 网页转化跟踪前的准备工作，本文将介绍如何配置落地页转化跟踪。

什么是落地页跟踪？

当用户点击广告，跳转到网站的指定页面，需要能够 跟踪当前页面发生的事件。

以华为商城为例，用户点击广告跳转到华为商城的某个商品详情页，需要在商品详情页跟踪点击加入购物车或者购买事件。

接下来，详细介绍落地页跟踪的配置过程，跟踪落地页中的加入购物车事件，并且能够查看转化成功的数据。

例如，有一个商品详情页（广告的落地页）：

https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html#/goods/6096094

1.       在 HUAWEI Ads平台创建网页跟踪

1.1     登录 HUAWEI Ads平台

https://ads.huawei.com/ppsdspportal/index.html

1.2     创建落地页跟踪

点击 工具 > 转化跟踪

点击 新建转化指标 > 跟踪线索，点击继续。

填写 转化名称、落地页链接、转化类别， 点击归因窗口和展示归因窗口可以使用默认值。

落地页链接 填写商品详情页的地址：

https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html#/goods/6096094

点击下一步，会提示提交成功。复制生成的转化 ID，用于后续配置。

1.3     创建成功后的联调状态是“未激活”。

至此，落地页跟踪创建完成。

2.       修改 DTM配置

接下来，对落地页中的加入购物车按钮配置跟踪代码。 DTM有 3种配置方式：

a.       普通代码埋点

b.       可视化埋点（普通）

c.       可视化埋点（按 Tag模板） ：推荐使用此方式进行配置

2.1     普通代码埋点

1.       获取网页中加入购物车按钮的 CSS

打开网页，在加入购物车按钮上右击，点击 检查，找到加入购物车元素。

选中加入购物车按钮元素，右键选择  Copy  >  Copy selector ,将获取的值保存，后续配置 DTM时需要使用。

示例值： #container > div.pro_detail > div.pro_meg > div.pro_meg_console > div > button:nth-child(1)

2.       配置变量

点击 变量管理 > 配置，选择页面元素下的 Element，保存配置。

3.       创建条件

点击 条件管理 > 新建，设置条件名称，条件类型选择“ 所有元素”，触发条件选择“ 部分点击”，变量选择“ Element”，操作符选择“ CSS选择器相符”，值设置为 :

#container > div.pro_detail > div.pro_meg > div.pro_meg_console > div > button:nth-child(1) ,#container > div.pro_detail > div.pro_meg > div.pro_meg_console > div > button:nth-child(1)  *

说明 ： CSS选择器的值为什么与通过 Copy selector获取的值不一样？

参考上图，加入购物车按钮里面其实还嵌入了一个 span元素，用户点击 button或 span都可以触发加入购物车。为了保证用户点击 button或 button中的子元素时都可以匹配成功，需要将 button中的子元素也进行匹配。

假如 button的 CSS为 X，那么 button中的子元素可以描述为  X *， button及 button的子元素描述为  X,X *  ( 中间用逗号分割 )。

4.       创建代码

点击 代码管理 > 新建，填写代码名称，扩展选择为“ HUAWEI Ads”，跟踪 ID设置为在 HUAWEI Ads平台获取的转化 ID，触发条件选择为上一步创建的条件，保存配置。

至此，普通代码埋点的配置已完成。

2.2     可视化埋点（普通）

1.       进入可视化埋点页面

点击 可视化埋点，输入要埋点的网站地址，点击 开始埋点后进入可视化埋点模式。

2.       添加埋点

点击 添加埋点，点击加入购物车按钮，会提示是否需要选择同类元素（如果需要进行同类元素埋点则点击 确定，否则点击 取消），本示例中选择 取消。

设置埋点信息：

填写埋点名称，触发事件选择“指定页面”，配置两个 URL匹配规则：

URL 包含“ https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html”。

URL 包含“ goods”

说明：为什么 URL匹配要使用包含，而不能使用等于？

因为 URL地址的参数是不固定的，特别是当加入广告的参数后， URL是会改变的，所以配置 URL匹配规则的时候最好使用包含，而不是等于。

3.       创建代码

点击 代码管理 > 新建，填写代码名称，扩展选择为“ HUAWEI Ads”，跟踪 ID设置为在 HUAWEI Ads平台获取的转化 ID，触发条件选择为上一步创建的可视化埋点。保存配置。

至此，可视化埋点（普通）的配置已完成。

2.3     可视化埋点（按 Tag模板）

1.       创建代码模板

点击 可视化埋点 >按 Tag模板埋点，进入按 Tag模板埋点页面。点击 新建，填写代码名称，扩展选择“ HUAWEI Ads”，保存配置。

2.       进入可视化埋点页面

选择上一步创建的 HUAWEI Ads模板，输入要埋点的网站地址，点击 开始埋点后进入可视化埋点模式。

3.       添加埋点

点击 添加埋点，点击加入购物车按钮，会提示是否需要选择同类元素（如果需要进行同类元素埋点则点击 确定，否则点击 取消），本示例中选择 取消。

设置埋点信息：

填写埋点名称， 跟踪 ID设置为在 HUAWEI Ads平台获取的跟踪 ID，触发事件选择“指定页面”，配置两个 URL匹配规则：

URL 包含“ https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html”。

URL 包含“ goods”

说明：为什么 URL匹配要使用包含，而不能使用等于？

因为 URL地址的参数是不固定的，特别是当加入广告的参数后， URL是会改变的，所以配置 URL匹配规则的时候最好使用包含，而不是等于。

至此，可视化埋点（按 Tag模板）的配置已完成。

3.       创建并发布 DTM版本

点击 版本管理 > 新建，填写版本名称，选择“ 创建并发布此版本”，点击确定。

4.       落地页转化跟踪联调

4.1     打开 HUAWEI Ads联调页面

点击转化 ID对应的联调按钮，进入联调页面。

4.2     复制并打开测试连接

4.3     点击加入购物车按钮，触发转化跟踪，联调状态变成“已激活”，说明转化跟踪成功。

说明：如果没有监测到转化行为，可以先禁用浏览器的缓存，然后刷新页面，再点击加入购物车按钮。

至此，落地页转化跟踪配置已完成。

欲了解更多详情，请参阅：
>> 华为开发者联盟官网

>> 获取开发指导文档
>> 参与开发者讨论请到 CSDN 社区 或者 Reddit 社区
>> 下载 demo 和示例代码请到 Github 或者 Gitee

原文链接： https://developer.huawei.com/consumer/cn/forum/topic/0202576105867750363?fid=18

原作者：胡椒