HubSpot One好久沒有和大家分享Google Tag Manager的小技巧了。本週我們花5分鐘來學習一個最基本的從頁面抓取內容並保存到Google Analytics的技巧。
不過我們先稍微賣個關子，先來了解下GTM的Trigger。
GTM的Trigger原理
GTM的Trigger是管理標籤Tag觸發的管理工具。在GTM進化到2.0版本之後簡化了許多設置，界面變得更友好了。不過由於GTM本身的靈活性，新手不免還是會產生一些困擾。比如下面這個例子:
這三種新建Trigger的方法全都是正確的，而且這三者並沒有誰優熟劣。這個Trigger在當用戶點擊頁面上ID為interesting_spot的元素時就會被觸發，觸發以後你就可以愛幹嘛幹嘛了（笑）。比如把對應的Click Text記錄到GA的Event中去：
在觸發標籤的時候，細心的你可能已經發現在GTM中可以輕鬆定義觸發的規則：
這裡補充一下，不難理解Unlimited和Once per page，那麼Once per event是什麼意思呢？其實這是GTM默認的設置，也就是說當Trigger滿足條件的時候觸發Tag。那麼問題又回來了，Unlimited又是什麼情況。我們注意到一個Tag可以添加多個Trigger，當幾個Trigger同時滿足時，如最簡單的gtm.click，Click Trigger 1：Click ID為“Interesting Point”，Click Trigger 2：Element Class為“PointOfInterest”。由於是“或”的邏輯Tag應該被觸發運行兩次。這就是Unlimited。這是一個很Tricky的地方，甚至GTM的官方說明都沒有說清楚。
抓取網頁任意元素
終於可以說正題了。你應該對HTML有一定的了解。假設訪客訪問你的網站的時候在網頁的特定部分都會有相應的內容，而你又不想麻煩程序員去推送數據到數據層。那麼這時該怎麼做呢？作為一個行銷者當然應該少去麻煩程序員。所以你可以利用GTM這個利器自行抓取頁面上的元素。
我們拿hubspot.one舉例子。當你登錄以後會看到頁面的右上角會出現你的用戶名。抓取UserId的跟踪方法我們在以往的文章中介紹過，其實還有另一種方法就是利用GA裡的Advanced Filter，這個在跟踪初始訪客來源的文章中也介紹過。
為了更加直觀，我們更想抓取“掃喵姨”，“兔猻喵”這樣的用戶名。那麼你就可以去抓取登錄後的用戶名。這在GTM中只需要一個Variable就可搞定。
你可以看到HubSpot One用了loginusername那是因為這個元素的ID就是這個值：<span id=”loginusername”>掃喵姨</span>這樣你就可以抓取到HTML標籤裡的內容。
如果你的標籤長這樣：<span id=”loginusername” username=”smy”>掃喵姨</span>，那麼你把username這個Attribute填入Attribute Name，就可以抓取“smy”。到此，你應該就輕車熟路了！我們把UserName這個Variable推入GA Tag的User Defined Dimension:
你可能要問了，那麼那個DOM元素如果沒有ID該怎麼辦呢？恭喜你，你的程序員寫代碼很隨意。如果沒有ID那隻有通過上一層或者使用標籤名來定位了。具體的Javascript代碼這裡就給出一個簡單的例子：
你還會用到的有document.getElementsByClassName()和document.getElementsByTagName()然後層層parse抽絲剝繭。
在這裡，根據你HTML和JavaScript的水平不同，你可能還是會麻煩前端程序員，不過你並不需要對網站進行更新，只需在GTM裡完成所有的魔法。
以上，這就是本次介紹的GTM應用。相當實用吧？感謝閱讀。