Web頁面如何進行視覺化埋點(二)
上一篇文章
我們介紹了
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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Web頁面如何進行視覺化埋點(一)Web視覺化
- Web頁面如何進行視覺化埋點(三)Web視覺化
- 如何使用Android視覺化埋點Android視覺化
- 【教程】手把手教你使用 MTA 視覺化埋點視覺化
- 視覺化埋點在React Native中的實踐視覺化React Native
- 商家視覺化埋點探索和實踐|得物技術視覺化
- 產品如何進行大屏資料視覺化.md視覺化
- 如何進行頁面優化?優化
- 資料視覺化如何進行?大致流程是怎樣的?視覺化
- Excel裡面如何進行歐元轉換Excel
- Web 頁面如何新增水印?Web
- 騰訊移動分析 MTA 首推視覺化埋點!動態運營是關鍵!視覺化
- 頁面視覺化搭建工具技術要點視覺化
- Web 頁面如何實現動畫效果Web動畫
- 沒想到,Python 還可以製作 Web 視覺化頁面!PythonWeb視覺化
- 資料視覺化的優點是什麼(二)視覺化
- 超低技術門檻!運營人員也可以直接使用Android視覺化埋點Android視覺化
- Python視覺化:Seaborn(二)Python視覺化
- Django 視覺化Web展示 學習Django視覺化Web
- Flutter頁面曝光事件埋點框架Flutter事件框架
- Html網頁標籤曝光埋點HTML網頁
- 二進位制檔案視覺化(二)視覺化
- pyecharts做資料視覺化(二)Echarts視覺化
- 二叉樹的視覺化二叉樹視覺化
- 如何利用散點圖矩陣進行資料視覺化矩陣視覺化
- 在WPF中嵌入WebBrowser視覺化頁面Web視覺化
- 頁面視覺化搭建工具前生今世視覺化
- 在進行大資料視覺化分析時,到底要如何進行呢?大資料視覺化
- 大資料視覺化的特點大資料視覺化
- 視覺化拖拽元件庫一些技術要點原理分析(二)視覺化元件
- Tableau視覺化結果的優化小技巧(二)視覺化優化
- 【Python視覺化】使用Pyecharts進行奧運會視覺化分析~Python視覺化Echarts
- 最火前端Web組態軟體(視覺化)前端Web視覺化
- ISM Web工業視覺化組態軟體Web視覺化
- Blocs 4 for Mac(視覺化網頁設計工具)BloCMac視覺化網頁
- EverWeb 3.9.6 視覺化的網頁設計工具Web視覺化網頁
- 視覺化引擎antv系列之分面Facet(二)視覺化
- 視覺化視覺化