【DTM】HUAWEI Ads與DTM網頁轉化追蹤（二）

上一篇介紹了 DTM 網頁轉化跟蹤前的準備工作，本文將介紹如何配置落地頁轉化跟蹤。

什麼是落地頁跟蹤？

當使用者點選廣告，跳轉到網站的指定頁面，需要能夠 跟蹤當前頁面發生的事件。

以華為商城為例，使用者點選廣告跳轉到華為商城的某個商品詳情頁，需要在商品詳情頁跟蹤點選加入購物車或者購買事件。

 

接下來，詳細介紹落地頁跟蹤的配置過程，跟蹤落地頁中的加入購物車事件，並且能夠檢視轉化成功的資料。

例如，有一個商品詳情頁（廣告的落地頁）：

 

1.       在 HUAWEI Ads平臺建立網頁跟蹤

1.1     登入 HUAWEI Ads平臺

1.2     建立落地頁跟蹤

點選 工具 > 轉化跟蹤

點選 新建轉化指標 > 跟蹤線索，點選繼續。

填寫 轉化名稱、落地頁連結、轉化類別， 點選歸因視窗和展示歸因視窗可以使用預設值。

落地頁連結 填寫商品詳情頁的地址：

點選下一步，會提示提交成功。複製生成的轉化 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 包含“ ”。

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 包含“ ”。

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

原作者：胡椒