上一篇介紹了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/...
原作者：胡椒