如何使用 GTM 的「CSS 選取器」(CSS Selectors)?
如果你已經使用 GTM 一段時間,可能會經常遇到 「CSS 選取器(CSS Selectors)」這個名詞,但不太清楚何時該使用它。實際上, 「CSS 選取器」 是一個強大的功能,它可以幫助我們解決許多原本需要工程師介入才能完成的追蹤事件,從而減輕工程師的負擔並加快行銷團隊的追蹤效率。
透過 「CSS 選取器」,我們能精確選取 網頁上的特定元素,並輕鬆獲取其 元素名稱、 文字和屬 性值 等信息。這不僅使追蹤的工作更加有效率,也大大擴展了我們在網頁追蹤和數據分析上的可能性。
舉例來說,如果我們希望在使用者滾動網頁至特定位置並看到某張圖片時,自動觸發一項事件,並把該事件及圖片名稱傳送至 GA4,以協助我們分析有多少人瀏覽了該圖片。
這種情況下,我們可以使用 「元素可見度」作為觸發條件,結合 「CSS 選取器」來精確選取該圖片元素。如果你對設置這類追蹤感興趣,我們之前撰寫過一篇文章,其中詳細介紹了相關步驟,有興趣的朋友可以看 這邊 。
此外,在設定 觸發條件的啟動時機 時,你可能會遇到以下這個選項:
在我們之前時,也曾經提到 「CSS 選取器(CSS Selector)」:
那麼, 「CSS 選取器(CSS Selectors)」 究竟是什麼呢?在深入探討其使用方法之前,讓我們先瞭解一下「CSS」本身。沒有它,我們所瀏覽的網頁都不會是這麼漂亮或是酷炫的樣子。
什麼是 CSS?
假設今天我們製作了一個網頁,沒有任何的 CSS,只有原始的 HTML 代碼,像是這樣:
而顯示在使用者眼前的網頁會如下圖這樣:
如果我們調整一下 HTML 原始碼,為其加上 CSS,譬如說: 把文字顏色變成紅色的,然後在文字下方加個底線。
顯示在使用者眼前的網頁就會變成這樣:
透過簡單的 CSS 應用,我們可以明顯看到文字樣式的轉變:字體獲得了裝飾,同時在文字下方增加了底線。這些只是基礎的 CSS 使用案例。一位優秀的網頁前端設計師能夠利用 CSS 使網頁變得極具吸引力和色彩豐富,從而提升使用者的瀏覽體驗。
CSS 全名是 Cascading Style Sheets ,它是一種用於定義標記語言(例如 HTML)所編寫文檔的呈現方式的語言。CSS 讓我們能夠自由調整頁面上的字體、顏色、間距以及圖像,甚至能創建響應式網頁,使網站的版面和外觀根據不同設備(如手機、平板電腦、桌面電腦)自動調整。
簡而言之,CSS 可以讓網頁設計師有效地控制網頁視覺效果和版型,以蓋房子來比喻的話, 如果 HTML 是構成建築的基礎材料,那麼 CSS 就好比是打造美觀外觀的磁磚、油漆或木質裝飾。
重複寫在每個 Tag 裡?
在了解了如何美化網頁文字後,你可能會好奇:如果我有許多段落文字,是否需要在每個 <p></p>
標籤中重複寫入 CSS?
這樣做不僅繁瑣,還會使代碼變得冗長,如下所示:
<div>
<p style=”color: red; text-decoration: underline;”>這是一篇介紹 CSS 選取器的文章</p>
<p style=”color: red; text-decoration: underline;”>這是二篇介紹 CSS 選取器的文章</p>
<p style=”color: red; text-decoration: underline;”>這是三篇介紹 CSS 選取器的文章</p>
</div>
當然,現實操作並非如此麻煩。作為網路技術基石的 CSS,其設計理念就是為了維持 HTML 代碼的簡潔與易於維護。因此, 我們可以把負責視覺樣式的 CSS 和負責網頁架構的 HTML 分開成兩個不同的文件 ,這樣就不需要在每個標籤元素內直接寫入 style 屬性。
這種做法不僅使代碼更加清晰,也便於後續的維護。
在我們上面的案例中,我們有三個段落要透過 CSS 進行美化。
<div>
<p style=”color: red; text-decoration: underline;”>這是一篇介紹 CSS 選取器的文章</p>
<p style=”color: red; text-decoration: underline;”>這是二篇介紹 CSS 選取器的文章</p>
<p style=”color: red; text-decoration: underline;”>這是三篇介紹 CSS 選取器的文章</p>
</div>
原本的做法是將 CSS 寫在 <p></p>
tag 裡面,現在我們只要在 CSS 文件裡面這樣寫:
p { color: red; text-decoration: underline; }
這段代碼的意思是,設定所有 <p></p>
標籤的文字顏色為藍色並加上底線。透過在網頁載入時引入 CSS 文件到 HTML 中,頁面上的所有 <p></p>
標籤便能自動展現出相同的外觀。這樣一來,就無需對每個 <p></p>
標籤重複編寫相同的樣式,大大提高了維護效率和一致性。
CSS 中的 Class 跟 id 又是什麼?
在 CSS 中使用 class
是一種常見的使用方式,這主要是為了提高 CSS 樣式的可重用性和靈活性,使得檔案更加乾淨且容易維護,這對於大型專案來說尤其重要,因為它有助於保持樣式表的清晰性和可管理性。
例如,假設一個網頁的 HTML 結構如下:
在對應的 CSS 文件中,我們編寫了 .header 的規則。這段 CSS 會與 HTML 文件中的 class=”header” 相對應。因此,屬於該 class 的 <div>
元素背景會變成藍色,而其內的文字則會變為白色:
.header { background-color: blue; color: white; }
.content { background-color: lightgray; color: black; }
.footer { background-color: green; color: white; }
通過使用不同的 class(例如 .header、.content 、.footer),我們可以為不同元素設定各自的樣式規則。這種方法的優勢在於能夠輕易地在多個標籤元素上重複應用這些 class,無需為每個元素單獨編寫樣式規則。
在未來的網頁設計中,如果其他元素需要應用相同的 CSS 樣式,只需為這些元素添加相應的 Class 名稱即可。這在 CSS 中是一種有效的樣式管理方法,也極大提高了代碼的可維護性。
另一方面,id 也是一種常見的定義方式,但它與 class 有著明顯的區別。在 HTML 文檔中,id 是唯一的,通常用於識別單一獨特的元素。
若使用 id,則網頁 HTML 的結構可能如下所示:
在 CSS 文件中的編寫如下所示:其中 #header 會與 HTML 文件中的 id=”header” 相匹配。這樣設定之後,擁有這個 id 的 <div>
元素的背景將變為海軍藍色,而其中的文字則會轉變為白色:
#header { background-color: navy; color: white; }
#mainContent { background-color: lightblue; color: black; }
#footer { background-color: teal; color: white; }
除了 id 本身必須是唯一的特性以外,和 class 不同的地方還有他們的前綴符號。
當你在 CSS 中使用點 「.」
前綴時,瀏覽器會尋找所有帶有該類名的 HTML 元素並應用相應的樣式。例如,.maldive
在 CSS 中表示所有 class="maldive"
的 HTML 元素。
當您在 CSS 中使用井號 「#
」前綴時,瀏覽器會尋找帶有該 ID 的唯一 HTML 元素並應用相應的樣式。例如,#theone
在 CSS 中表示 id="theone"
的 HTML 元素。
這兩個符號在語法上定義了選擇器的類型,使得 CSS 語法清晰且易於理解,幫助瀏覽器識別要應用樣式的 HTML 元素,也讓設計師和開發者快速識別出正在應用樣式的是 class 還是 ID,更是我們接下來學習使用「 CSS 選取器 」重點之一。
所以,「CSS 選取器」是什麼?
在 Google Tag Manager (GTM) 裡, 「CSS 選取器」 是個超實用的工具,它幫我們準確捕捉網頁上特定元素的行為,來觸發各種事件,例如:
「CSS 選取器」 讓我們能精確地決定要追蹤網頁上哪些元素的行為,讓數據收集變得更加精準和有效。
如何使用 GTM 中「CSS 選取器」?
接下來,我們來透過一個實務上可能會碰到的例子,來解釋 「CSS 選取器」 的使用方法。這樣可以幫助我們在特定情況下啟動事件代碼,或是抓取頁面上某個特定位置的數據。
想像一下,有這麼一個網頁場景:
假設我們想要知道有 多少人點擊了網頁上的綠色區塊裡的連結。(下圖)
我們的目標是,在使用者點擊這個連結的時候,讓 GA4 觸發一個事件代碼,並向 GA4 傳送一個「點擊」事件。
找出元素所在位置
於畫面中綠色區塊內的連結點右鍵,選擇 「檢查」 > 檢查工具中找到
<a></a>
的位置
在瀏覽器的檢查工具裡,我們可以看到網頁的 HTML 代碼,還有它的層層巢狀結構。就像上面的例子,你會發現那個 <a></a>
標籤其實被包在兩層 <div></div>
和一層 <p></p>
裡面。一旦確認了這個位置,我們就可以開始動手,利用「 CSS 選取器 」設定我們的觸發條件了。
用「CSS 選取器」設定觸發條件
GTM 左側面板選擇「 觸發條件」 > 右上角「 新增」 > 選擇觸發條件類型「 僅連結 」
選擇「 部分的連結點擊」 > 條件選擇「 Click Element」 > 下拉選單選擇「 符合 CSS 選取器」 > 輸入
<a>
tag 所在位置「 #onekey > div > p > a 」
要設定「CSS 選取器」的觸發條件,記得一定要選擇「Click Element」(圖中標示 2 的欄位)。因為我們的目標是找出被點擊的那個元素,所以一定得用跟「Element」相關的變數來設定。
而在最右邊的欄位中,我們輸入這段 #onekey > div > p > a
代表的是:
我們的目標是定位網頁上某個特定的 <a></a> 標籤。這個標籤位於一個 <p> 標籤之下,而這個 <p> 又是某個 <div> 的子元素。最後,這個 <div> 則是屬於某個 ID 屬性為 onekey 的元素底下。
換句話說,在這種巢狀結構裡, 每個元素都像是在一個家族中,存在著父母與孩子的關係。在這個例子裡,
#onekey > div > p > a
表示<a>
標籤是<p>
的子元素,<p>
是<div>
的子元素,而這個<div>
則是 ID 為 onekey 的<div>
的子元素。
前面我們提到過,id 屬性在網頁上應該是唯一的,意指不會有其他元素使用相同的 id。因此,當我們指定 id=”onekey” 下的 <a> 標籤時,這表示只有在使用者點擊屬於 id=”onekey” 的元素下的 <a> 標籤時,我們設定的觸發條件才會被滿足,相應的事件代碼才會被觸發。
(記住喔,如果是 id,前面要加「#」;如果是 class,則要加「.」。)
CSS 選取器有許多不同的寫法。在上面提到的觸發條件中,我們也可以這樣寫:
div#onekey > div.keychain > p.category > a
我們要找的是一個 <a> 標籤,它位於 class=”category” 的 <p> 標籤之內,而這個 <p> 又是 class=”keychain” 的 <div> 標籤下的子元素。進一步來說,這個 <div class=”keychain”> 又是 id=”onekey” 的 <div> 標籤下的子元素。
無論是哪種寫法,只要使用者點擊的連結符合這樣的結構關係,觸發條件就會被滿足,達到相同的結果。
當我們使用「CSS 選取器」時,最好避免寫得太過複雜或冗長。這是因為如果網頁進行了改版,或是網站工程師對界面進行了細微調整,刪除了我們所依賴的某個元素,那麼原本設定好的「 CSS 選取器 」可能就會失效。就拿我們剛才的例子來說,如果工程師刪除了 <div class=”keychain”> 這個元素,那麼我們設定的觸發條件就會不再有效。
我們之前提到過,id 屬性在網頁上是獨一無二的。在我們的例子中,幸運的是,存在一個 id 屬性,因此我們可以考慮進行如下改動:
div#onekey a
這樣的設定表示,我們要找的目標是所有位於 id 為 onekey 的 <div> 元素底下的 <a> 標籤。
你會注意到,我們在這裡把「>」符號替換成了「 空格」。在「 CSS 選取器」裡,「>」符號是用來表示直接的父子關係。但在這個案例中,我們不再需要透過其他元素來定位 <a>
標籤,只要是位於 <div id="onekey">
底下的 <a>
標籤被點擊,觸發條件就會被滿足。
換句話說,我們不再依賴中間的元素來找到 <a>
標籤。即使 div.keychain 和 p.category 在網頁上不存在,我們的觸發條件依然有效,從而能夠成功觸發事件代碼。
幾個常用的「CSS 選取器」寫法
「 CSS 選取器」的應用不僅限於設定點擊事件的觸發條件。它還廣泛應用於 「DOM 元素」變數、「 自訂 Javascript」變數,以及「 元素可見度 」觸發條件的設定。
以下我們會舉例幾個常見的基礎使用方式,未來在面對不同網站的結構時,你就會知道該如何設定符合需求的「 CSS 選取器 」了。
「p.keychain」 :所有 class 屬性為 keychain 的 <p> tag 都會被選取。
「p.keychain.good」: 所有 class 屬性為 keychain good 的 <p> tag 都會被選取,這代表同一個 tag 裡的 class 有兩個值。
div.maldive, .palau:所有 class 屬性有 maldive 或是 palau 的 <div> tag 都會被選取,逗號代表的是「 或 」,逗號之後請用「空格」分開。
div#onekey:id 屬性為 onekey 的 <div> 會被選取。
div#onekey > div.keychain > p: 選取位於 <div> 元素 id 屬性為 onekey 底下的 <div> 元素 class 屬性為 keychain 底下的 p tag 。
也可以寫成 #onekey > .keychain > p 。
a[data-id=”456″]:選取屬性 data-id 為 456 的 <a> tag。
div#onelaptop a:選取所有位於 id 為 onelaptop 底下的 <a> tag。注意這邊是用「 空白」分開,而不是「 > 」,因此沒有父子關係(parent-child),只要層級隸屬於 <div id=”onelaptop”> 之下的 <a>,都會符合條件。
li:nth-child(1):選取第一個 <li>
tag,以此類推,後面括弧內的數字也可以改成(odd)或是(even),選擇列表中的單雙數。
div#specialid > *:最後面用一個 *號表示,意指 所有母元素為 <div id="specilaid">
的元素,都會符合我們要選取的條件。
a[href^=”www.abc.com"]:只要 <a> 標籤內的連結是 www.abc.com 開頭的,都會符合選取條件,如果把「^」改成「*」,變成 a[href*=”www.abc.com"],代表只要 <a> 標籤內的連結有包含 www.abc.com,就符合選取條件。
btn.iambutton, btn.iambutton *:代表當有使用者點擊 class 為 iambutton 的按鈕以及其下一層的所有元素時,就會符合選取的條件,注意「*」與 btn.iambutton 之間有一個「空格」,「,」與 btm.iambutton 之間也是「空格」。
#id1,#id2,#id3,#id4:在「CSS 選取器」中,「 , 」逗號代表的是「或」的意思,如果你的頁面上有許多個 ID 需要追蹤,例如在使用「元素可見度」觸發條件時,你以 ID 作為觸發條件,而這樣的缺點是必須要建立好多個觸發條件,很容易造成觸發條件清單的混亂,就可以改用 「CSS 選取器」的方式,簡化「元素可見度」觸發條件的設定。
「CSS 選取器」的使用方式有很多種,這邊只是先列出基本的幾種寫法,如果還想要進一步學習的朋友,可以參考 W3C 的 CSS 即時預覽或是 W3C 的 CSS Selector 文件資料,都可以幫助你對 「CSS 選取器」 的使用有更深的認識。
使用檢查工具中的「Copy selector」
除了自己觀察以外,我們也可以使用「 copy selector」的方式來幫我們找出「 CSS 選取器 」的層級。
檢查工具中對要選取的元素按「 右鍵」> 選擇「 Copy」> 選擇「 Copy selector 」
可以先找個地方貼上剛剛複製的 selector,如果網頁結構較複雜,選出來的可能會很長一串,會變成下面這樣:
post-14 > div.entry-content > div > div > ul > li.woocommerce-order-overview__total.total > strong > span > bdi
這正是為什麼我們前面花了這麼多時間解釋「 CSS 選取器 」的原理和範例。現在,你需要判斷哪些中間元素是非必要的。即使刪除這些元素,我們依然能準確選取到目標元素。
正如前面提到的,如果設定太長,一旦網頁進行了小幅度調整或大改版,只要有任何一個元素被移除或 class 名稱被更改,我們的「 CSS 選取器 」設定就可能會失效。
此外,要檢查我們所需元素的 class 與其他元素的 class 是否重複,可以參考我們之前介紹的 「DOM 元素」變數文章 。這裡就不再重複詳述。
總結一下
為了讓「 CSS 選取器 」更容易理解,本文一開始就簡單地介紹了什麼是「CSS」,包括它與 HTML 的關係,它在網頁設計中的重要角色,以及它的應用方式。
然後,我們深入講解了什麼是「 CSS 選取器 」,以及它如何幫助我們設定追蹤事件。我們還一步一步地解釋了如何在網頁中找到特定元素的位置,方便將其應用於觸發條件中。
此外,也提供了一些常見的「 CSS 選取器 」範例,並特別提醒大家避免讓選取器過長,以免影響未來的管理與維護。
作為結尾,我們還分享了兩個來自 W3C 的實用資源,這些資源不僅能助你學習,也能提供 CSS 選取器使用的參考。這對於處理那些沒有 class 或 id 的元素特別有幫助,為你提供更多的解決方案。
如果未來我們發現更多有趣的「CSS 選取器」應用,我們也會更新這篇文章來分享給大家。(雖然已經很長了)