電商的基本應用場景有：頁面瀏覽，商品列表瀏覽，商品列表點擊，加入收藏夾，加入購物車，結算付款。為促進商品的成交，產品運營人員需要通過數據洞察用戶在每一個環節行為，恨不得在每一個營銷活動或業務功能的全流程都加上事件追蹤埋點，且每一次隨着業務的發展不斷進行優化，運營還需要不斷地給產品和開發提交每一個版本的埋點變化需求。
這樣帶來的問題就是，對數據的需求越來越復雜、營銷策略變化更快，如果依賴傳統的硬編碼方式，效率和敏捷性會大打折扣，導致錯過最佳營銷時間點。
用DTM配置的埋點方式無疑是很好的解決辦法，它的無代碼靈活動態數據標簽能力可以讓非技術人員直接參與到部碼工作中，省去部門之間的溝通成本，不需技術開發人員即可實現營銷數據隨需跟蹤，助力精細化運營。
1 接下來展示DTM在WEB端如何實現頁面瀏覽監控。
首先針對不同瀏覽深度，設定頁面瀏覽25%，50%，75%，90%，100%為上報事件。
1.1 條件配置如下：
1.2 代碼編輯如下：
1.3 我們在配置中選擇的對接分析平台是GA，當事件發生后，事件截圖自動發送給GA。
如果沒有使用DTM埋點監控洞察用戶行為，就只能從GA上簡單的看到網頁瀏覽截圖（如下），無法得知更多更具體的用戶行為。
2 同理，APP端也可輕松實現頁面瀏覽監控
2.1 代碼編輯如下：
2.2 最后發送到GA的事件截圖：
3 DTM在WEB端實現商品列表瀏覽
首先設置瀏覽深度達到等於或者大於37%且停留2秒作為商品列表事件觸發條件。
3.1 條件配置如下（此處根據設定，應有2個條件）：
3.2 代碼編輯如下：
3.2 代碼編輯如下：
4 DTM在APP端實現商品列表瀏覽
首先設置商品列表頁面滑動作為商品列表事件觸發條件。
4.1 條件配置如下：
4.2 代碼編輯如下：
4.3 最后發送到GA的事件截圖：
5 DTM在WEB端實現商品列表點擊
5.1 首先，我們先針對Mate系列商品點擊，設置三個條件。
5.2 接下來設置代碼並引用此三個條件：
5.3 最后，只要滿足任意一個條件，都會發送到GA事件截圖：
6 DTM在APP端實現商品列表點擊
首先，設置點擊商品列表上每一項商品作為觸發商品點擊事件。
6.1 條件配置如下：
6.2 代碼編輯如下：
6.3 最后發送到GA的事件截圖：
7 DTM在WEB端實現商品加入收藏夾
7.1 首先，設置一個“自定義事件”，加入收藏夾並命名為“collectGood”，如下圖所示：
7.2 設置collectGood事件時，讓開發人員push相關商品數據到數據記錄層
7.3 配置代碼並引用記錄層數據：
7.4最后發送到GA的事件截圖：
8 DTM在APP端實現商品加入收藏夾
首先，設定在商品詳情界面點擊收藏按鈕時，產生一個收藏事件
8.1 條件配置如下：
8.2 代碼編輯如下：
8.3 最后發送到GA的事件截圖：
9 DTM在WEB端實現商品加入購物車
9.1 首先，設置一個“自定義事件”，加入購物車並命名為addToCart，如下圖所示：
9.2 設置addToCart事件時，需讓開發人員push相關商品數據到數據記錄層：
9.3 配置代碼並引用記錄層數據：
9.4 最后發送到GA的事件截圖：：
10 DTM在APP端實現商品加入購物車
首先，設定在商品詳情界面點擊購物車按鈕時，產生一個加入購物車事件。
10.1 條件配置如下：
10.2 代碼編輯如下：
10.3 最后發送到GA的事件截圖：
11 DTM在WEB端實現結算付款
11.1 首先，設定一個“自定義事件”，結算付款並命名為“settlement”，如下圖所示：
11.2 設置settlement事件時，會讓開發人員push相關交易整體數據到數據記錄層：
11.3 配置代碼並引用記錄層數據，商品數據通過“myprod”發送：
11.4 設置settlement事件時，同時會讓開發人員push相關商品數據myprod到數據記錄層
11.5 在銷售業績中可以看到交易情況：
可以查看具體產品業績（相當於訂單和訂單行已經結合）：
12 DTM在APP端實現結算付款
首先，設定在支付界面付款完成后，產生一個結算付款事件，
12.1 條件配置如下：
12.2 代碼編輯如下：
12.3 最后發送到GA的事件截圖：
以上，便是DTM實現電商所有基本應用場景的實際操作過程，我們可以看到，上述這種不復雜的埋點需求，僅通過DTM配置即可實現，這種部署方式的優勢在於，非技術人員經過簡單的培訓后，也可以參與到代碼的維護工作中。可見DTM提供了非常靈活、可以適配多種不同場景和要求的部署方案，使用DTM一系列的預置標簽，可以在幾分鍾之內完成幾天甚至幾周的任務。如此強大的多場景覆蓋能力和人性化的設定，將使得DTM成為了一款備受青睞的優秀工具。
如何接入華為動態標簽管理（DTM）？
了解更多華為動態標簽管理（DTM）信息，可訪問華為開發者聯盟官網。
了解集成SDK相關信息，請查閱集成指導：
移動Android
示例代碼: https://github.com/HMS-Core/hms-dtm-demo-android-studio
Web網頁JavaScript
示例代碼: https://github.com/HMS-Core/hms-dtm-demo-web
如您在集成過程中遇到問題，可通過在線提單聯系我們。
欲了解更多詳情，請參閱：
華為開發者聯盟官網：https://developer.huawei.com/consumer/cn/hms?ha_source=hms1
獲取開發指導文檔：https://developer.huawei.com/consumer/cn/doc/development?ha_source=hms1
參與開發者討論請到Reddit社區：https://www.reddit.com/r/HuaweiDevelopers/
下載demo和示例代碼請到Github：https://github.com/HMS-Core
解決集成問題請到Stack Overflow：https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest
原文鏈接：
https://developer.huawei.com/consumer/cn/forum/topic/0204391049754110077?fid=18&pid=0304391049754110413
作者：胡椒