Web頁面如何進行視覺化埋點(二)

華為開發者論壇發表於2021-05-27

上一篇文章 我們介紹了 DTM 多種埋點方案之普通埋點。接下來將給大家介紹第二種按Tag埋點的方式及具體操作教程。


>>什麼是按 Tag 埋點?

按Tag埋點即 按照模板進行埋點,模板根據三方平臺預設,適用於固定上報三方平臺,更加方便快捷建立上報三方平臺的埋點資訊。

1.1 建立視覺化連線

以上報Google Analytics為例

1)         選擇“視覺化埋點”頁籤,進入視覺化埋點。

2)         點選右上角“按Tag模板埋點”跳轉至Tag模板頁。

3)         在“選擇程式碼模板”頁面,點選“新建”按鈕建立程式碼模板,配置如下資訊後點選“儲存”:

a)        輸入“程式碼名稱”。

b)       選擇“Google Analytics(分析):Universal Analytics”擴充套件型別。

c)        填寫跟蹤ID(該ID從谷歌分析平臺獲取,如:UA-xxxxxxxxx-x)。

d)        其他欄位可保持預設值不做更改。

4)         選中已建立的程式碼模板,在右側的 “新增埋點” 頁面,點選“開始埋點”。


1.2 新增埋點

1)          系統跳轉至“新增埋點”頁面,點選右側的“新增埋點”按鈕。

2)         元素型別預設“按鈕或連結”。

3)         選擇左側頁面HUAWEI Mate系列模組的“檢視詳情”按鈕。

您是否要選擇同類元素? - 確定

4)         配置埋點相關資訊

a)         輸入“程式碼名稱”。

b)        上報型別:事件上報。

c)        事件類別:{{Event}}(引用內建變數Event)

d)       事件操作:檢視詳情(使用事件類別欄位右側小手選擇頁面上HUAWEI Mate系列模組中的檢視詳情作為同類引數)。

e)        事件標籤:HUAWEI Mate Xs(使用事件標籤欄位右側小手選擇頁面上HUAWEI Mate系列模組中的商品名稱作為同類引數)。

f)          其他欄位選項保持預設不做修改。

5)         點選“確定”儲存埋點。

6)         檢視埋點:點選埋點右側的“∨”圖示展開埋點。

7)         退出連線:點選頁面左上角“‹”退出視覺化連線。


1.3 建立及釋出版本

1)         進入“版本管理”頁面,點選“新建”按鈕。

2)         在“建立版本”頁面輸入版本名稱和描述。

3)         選擇“建立併發布此版本”選項。

4)         點選“確定”。


1.4 觸發視覺化事件

1)        下載新版本:在瀏覽器中重新整理測試網站下載最新的DTM配置

注:預設情況下,DTM JSSDK下載最新版本的快取時間間隔是15分鐘,如果想要立即下載最新版本,可以禁用瀏覽器快取,並重新重新整理測試網站。

2)          點選HUAWEI Mate系列模組中任一“檢視詳情”按鈕。

3)           Google Analytic 上檢視資料。

 

欲瞭解更多關於動態標籤管理服務 請點選>>


欲瞭解 HMS Core 更多詳情,請參閱:
>> 華為開發者聯盟官網

>> 獲取開發指導文件
>>參與開發者討論請到 CSDN社群 或者 Reddit 社群
>>下載 demo 和示例程式碼請到 Github 或者 Gitee
>>解決整合問題請到 Stack Overflow


原文連結: https://developer.huawei.com/consumer/cn/forum/topic/0201547481659900298?fid=18

原作者:胡椒

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69970551/viewspace-2774168/,如需轉載,請註明出處,否則將追究法律責任。

相關文章