GTM教學｜使用DOM抓取表格的值

CSS Selector為前端工程師或是網站設計常用的一種語法規則。CSS 選擇器可以使指定HTML，套用在特定CSS上；在爬蟲的應用，則是常用來做為頁面的定位；而在GTM的應用，則是用CSS 選擇器，抓取某一個特定的DOM回傳值。

例如名單型網站、部落格，常常會需要判讀回傳值。而電商類型的網站，則需要動態判讀「加入購物車、結帳、購買」等的動態數值。後續也可以透過CSS做出GA4電子商務事件、GA4網站事件漏斗規劃，因此CSS選擇器絕對是一個必要的數位追蹤技巧。

這一篇想要快速跟讀者介紹該怎麼學習，網站的選取工具「CSS Selector」，以最簡單好上手的方式學習，如何讀取網站上表格的資料。

章節內容

0.1 CSS選擇器必備概念
0.2 以臉書為CSS練習平台

1 趕快在電腦實測吧!
2 抓到資料才算學會!

CSS選擇器必備概念

後面的教學會需要使用到，先記下面這些語法內容，基本上大多都會圍繞在Class,ID的應用。

document.queryselector()
\\用於選擇網站第一個元素，通常用於ID的選取，因為ID在整個網頁只會有一個。

document.queryselectorAll()
\\當你不確定網站有多少個同樣的class，因此你需要抓出該元素位於陣列的第幾個位置。這時候就需要用All結尾。

「Class=“.”」Html中的Class屬性，以點為表示。

「ID=“#”」Html中的ID屬性，以#為表示。

以臉書為CSS練習平台

如果你不想撰寫關於程式碼，你可以使用GTM的內建變數 – AutoEvent，他可以直接指定html中的屬性KEY值，並返回VALUE值給你。詳請要怎麼使用，你可以看這一篇「GTM基礎教學｜實用變數 – AutoEvent追蹤使用者點選的圖片」。

首先我先在臉書的帳號欄位輸入「這是我輸入的內容」，接著開始進行Css Selector的應用。

1.對你要找尋的目標區域，或是目標文字，點選右鍵->檢查(inspect)(F12)，會開啟這個網站頁面的DOM文件，這裡也叫做「開發者工具」，藍色反白背景的那串，即是你剛剛右鍵的對應欄。

2.在DOM文件中，找到藍色背景的那串，裡面的class=”xxxx”，像是我臉書的範例內容即為「inputtext _55r1 _61uy」。記下最前面的「inputtext」即可!

3.點選開發者工具，上面的主控台(console)，如果你一點開，發現裡面已經有資料，你可以先看我範例圖上面，點選那個像「禁止」的符號，清除全部。

4.輸入「document.querySelector(‘.inputtext’).value

即可找到對應我在臉書上面打的內容。

趕快在電腦實測吧!

抓到資料才算學會!

以第二個網站作為範例

我再去第二個網站，這次換一個官網常見的表單方框，一樣先打上範例「這邊是我打的內容」。

1.點選右鍵->檢查(F12)

2.找到對應的class=”search-field”，並且記下，search-fied這個值。

3.點選開發者工具上方，主控台Console，輸入

document.querySelector(‘.search-fied’).value

Enter即完成。

進階選取CSS的方式

document.querySelector('span[class="x1lliihq x6ikm8r x10wlt62 x1n2onr6 xlyipyv xuxw1ft"]');
\\使用於網站Class不夠明確，以元素+屬性下去抓取

document.querySelector('div[class="x6s0dn4 x78zum5 xl56j7k x1rfph6h x6ikm8r x10wlt62"] span');
\\以父子關係作為抓取，當如果你要選取的元素沒有class, id任何屬性，此時你只能網站找尋父層，再依序篩選子層。

CSS Selector常用的搭配

textContent

document.querySelector('.x1lliihq').textContent;
\\抓取該元素的字串

match()

var new_price = price.match('[0-9]+.[0-9]+');
使用正規表達式篩選符合0-9.0-9的字串。

replace

document.querySelector('span[class="x1lliihq x6ikm8r x10wlt62 x1n2onr6"]').textContent.replace('聊天','')
\\將聊天字串，換成空白字串，亦即刪除聊天兩個字。

如果你想要了解常用的JS Syntex 這一篇裡面有蒐集大多GTM埋設時會用到的語法。

我個人使用GTM認為如果你能掌握大部分的網站抓取資料，基本上在難的條件觸發設定，都難不倒你。所以我個人認為如果你想深入學習GTM，那CSS選擇器，絕對是一個很好的方向。

本篇是關於基礎CSS 選取器的應用，如果你想知道更多CSS Selector的應用，下一篇教學是不需要輸入程式碼就可以抓取css屬性，可以查看這一篇「GTM基礎教學｜GTM如何使用DOM抓取表格的值｜3分鐘學CSS Selector」。

GTM教學｜CSS Selector抓取表格的值

CSS選擇器必備概念

以臉書為CSS練習平台

趕快在電腦實測吧!

抓到資料才算學會!

以第二個網站作為範例

進階選取CSS的方式

CSS Selector常用的搭配

textContent

match()

replace

更多文章

Looker Studio

GA4

GTM

BigQuery

其他

相關