HubSpot One在以往陸陸續續地介紹了許多GTM的小經驗和小竅門。如果你是HubSpot One的忠實讀者那麼，你對GTM一定不會陌生。作為Google Analytics 360套件中的尖刀組件，GTM承載著數據抓取得重任。以往我們承接到一個Web Analytics的項目時需要和客戶的前端工程師磕磕碰碰好久才能把代碼部署到HTML頁面中，而現在有了Google Tag Manager這些活被簡化到了“一片蛋糕”那麼簡單。我們只要將GTM的Container代碼發給客戶並讓他們統一放置到<body>開始標籤之後，剩下的我們就可以獨自完成。而我們獨自完成的部分也僅僅需要一兩小時，簡單的幾分鐘便可部署。這多虧了GTM的靈活性和易用性。本篇我們將繼續介紹GTM的“大殺器”之一的CSS選擇器（CSS Selector）功能，希望能夠進一步簡化各位網站分析師的布碼工作。
DOM元素在GTM中的表示
HTML是一個個DOM元素構成的，其中也插入了腳本和样式。每一個HTML標籤都可以認為是一個DOM元素（有例外，但請各位大神此處勿較真）。比如<H5>這才是H5！ </H5>，這裡的H5代表第五層級的Heading。默認的樣式在每個瀏覽器中有所不同，而且你也可以用CSS來對其進行樣式的定義。在HubSpot One，它看上去就是這樣的。
這才是H3！
這才是H4！
這才是H5！
我們可以將樣式直接寫在H5標籤中，同樣我們也可以用CSS選擇器來對其進行修飾。比如下面的p.center就是一個CSS選擇器。它規定了class為center的p標籤必須居中並且用紅色字體。
p.center {
text-align: center;
color: red;
}
先科普一下，我們注意基本的CSS選擇器語法：
- . 表示一個類，即class
- # 表示元素的id
- [] 表示屬性
- > 表示直接子元素
- 空格表示後代，子元素、子元素的子元素……
- + 表示相鄰的兄弟元素
在現代瀏覽器中，在JavaScript中我們也可以使用document.querySelector(“.example”);來對某一個DOM元素進行定位。這比傳統的getElementsBy什麼的要好用得多。
在Google Tag Manager中，我們一樣可以使用CSS選擇器。前提是我們要先定義好Element的變量。變量的定義有多種方法比如你可以如下圖開啟Click Element這個默認的數據層變量。
當你需要針對錶單提交或表單操作時，你可以同時勾上Forms – Form Element。另一種方法是新建一個Variable選擇Page Elements中的Auto-Event Variable作為變量類型。不管怎麼說，這下我們就可以對這個元素進行選擇操作了。
說到選擇操作，我們一定知道我們必須新建一個觸發器也就是Trigger。那麼我們通過Triggers – New新建一個Trigger。然後選擇Click – All Elements作為類型。
這樣我們就有了一個觸發器了，這個觸發器的觸發條件是“當點擊class為center的p標籤元素”。如果你在瀏覽HubSpot One這篇文章的桌面版，你可以點擊上面“這才是H5！”你會發現一個彈出消息。這個彈出消息就是由一個應用了CSS選擇器的觸發器所觸發的。
那些超實用的CSS選擇器
你可能要說了，我現在明白了CSS選擇器在GTM中如何使用，那麼CSS選擇器本身有哪些用法呢？你可以參考W3CSchool來了解複雜的CSS選擇器用法。我們在此借鑒了Simo Ahava最新博文的成果為大家推薦幾個常用的CSS選擇器。
點擊外鏈
a[href*=”hubspot.one”]
這個例子說明點擊的<a></a>標籤的href屬性中包含HubSpot One的域名。當我們使用外鏈標記時記得要在條件中選擇does not match CSS selector。
移動頁面電話呼叫
a[href^=”tel:”]
當手機頁面上放置電話號碼鏈接讓用戶直接撥打時，我們可以使用這個CSS選擇器來統計用戶撥打次數和頁面環境訊息。
文件下載
a[href$=”.pdf”]
這個選擇器將統計鏈接後綴為pdf的點擊。同樣的，我們可以把它舉一反三地應用到，.exe和.apk。
點擊發送郵件
a[href^=”mailto:”],a[href^=”mailto:”]*
和我們上面的移動電話呼叫的例子相似，我們這裡用了mailto。這裡我們又重複了並在後面加上星號*是為了避免一些特殊的情況發生。這也是Simo指出的一大問題，因為DOM元素總是嵌套的，某些情況下真正接受到並被檢測的元素並不一定是<a>元素。
舉個例子：
<a href=”mailto:[email protected]”>
<span>[email protected]</span>
</a>
在這個情況下，被送去GTM檢測的DOM元素是<span>。如果我們僅僅用了a[href^=”mailto:”]，那麼它並不能觸發標籤。於是後面那段重複加*就格外重要了。因為此時GTM還會檢測這個<span>元素是否在一個<a>元素內。
會玩了嗎？
以上就是我們要介紹的超快速部署網站統計的方法。只要你在網頁上點擊鼠標郵件檢查元素，大致了解網頁的HTML構造，你就可以輕鬆抓取用戶在網頁中的行為。同時只要你善用星號*，就可以比較好地解決DOM元素嵌套的問題。如果你還對GTM的CSS選擇器應用有所困惑，請務必一起探討。
要想深入了解CSS選擇器，你還可以參考Periscopix的精彩分析。傳送門
http://www.periscopix.co.uk/blog/new-gtm-trigger-condition-matches-css-selector/
感謝閱讀，感謝關注HubSpot One。