本篇要解決的問題
GA 報表,很重要的兩個名詞就是:維度、指標。
簡單的說,維度是直的那排,指標是橫的那排,像這樣:
自訂維度指的就是,除了 GA 提供預設的維度外,還可以寫自己的維度,依照不同的設定,可以看到頁面不同的成效。
比方 GA demo account 上就可以看到產品 ID 在各個頁面的成效如何:
本篇要解決什麼問題呢?就是當無法從網址上得到更多資訊時,就用自訂維度的方式來提供。
像是本站的網址架構為了精簡,所以設定成這樣:
https://letswrite.tw/文章名稱/
頁面標題的部份是這樣:
文章名稱 - Let's Write
精簡有精簡的好處,但同時也有壞處。
假設今天如果我想要看導覽列上,「CSS」底下的流量是多少,或是「API」這分類底下的文章流量是多少?用 GA 的話就無法看到,因為網址或網頁 title 上沒有寫上它的分類,因此用 GA 也看不出來。
這時,如果設定一個自訂維度叫「catagory」,並且設定它的值就是這篇文章的分類,就可以解決這個問題。
設訂自訂維度 後台設定
要用自訂維度,要先在 GA 後台設定。
首先,進入到 GA 管理介面,確定好帳戶後,在「資源」的部份,下方就有一個「自訂定義」的選項,點開後就會看到「自訂維度」、「自訂指標」:
點了自訂維度後,再按下「新增自訂維度」,就可以看見設定介面:
範圍的部份,參考 官方說明文件 如下:
- 產品 – 將值套用至已設定此值的產品 (僅限「加強型電子商務」)。
- 匹配 – 將值套用至已設定此值的單次匹配。
- 工作階段 – 將值套用至單一工作階段中的所有匹配。
- 使用者 – 將值套用至目前和未來工作階段中的所有匹配,直到此值變更或自訂維度不再有效為止。
「產品」要配上電子商務報表才行,關於電商報表的部份,以後有時間再來寫XD~
GA報表:電子商務 內部宣傳 報表
相關文章這邊選用的是工作階段。按下建立後就可以看見設定成功,還會出現要貼上的程式碼給你:
這邊給的程式碼,很神奇的是沒有給 gtag 的設定方式,而本站埋的 GA 是 gtag 的,所以預設提供的程式碼並不適合,我們必須要埋對 gtag 用的程式碼。
設定自訂維度 gtag 埋程式碼部份
gtag 使用自訂維度的 code,可以在 說明文件上 看到。
使用 gtag 的自訂維度,分成兩個部份。
載入 GA 時加入 config
第一個部份是載入 GA 時,在 config 的部份改成以下:
gtag('config', 'GA_MEASUREMENT_ID', { 'custom_map': {'dimension<Index>': 'dimension_name'} });
<Index>
指的是剛後台設定完後,它的索引編號是多少,在自訂維度的列表上可以看到,以我們剛設定的來說:
索引編號是「1」,因此整個埋 GA code 的部份要寫成:
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-XXXXXXXX-X', { 'custom_map': {'dimension1': 'category'} }); </script>
「UA-XXXXXXXX-X」是GA的追蹤ID。
給自訂維度的值
第二部份就是自訂維度要收到值時,給它值。
這邊要的是頁面開啟時就給值,因此就一併寫在引用 GA 之後。
給自訂維度值的 code 如下:
gtag('event', 'any_event_name', { 'dimension_name': dimension_value });
看得出來,GA 自訂維度跟電商報表功能一樣,是吃 GA 事件的,收到事件後再由 GA 去幫你整理成資訊。
「any_event_name」這邊,填入的值會變成事件動作。
本站要抓的是各個文章的分類,因此可以寫成這樣:
gtag('event', 'record_catagory', { 'category': 文章分類 });
實際操作時,因為有些文章的分類會選到不止一類,所以有用一個 forEach
去塞成陣列,丟值時再轉成字串:
var cats = document.querySelectorAll('[rel="category tag"]'); var cats_list = []; Array.prototype.forEach.call(cats, function(c) { cats_list.push(c.text); }); gtag('event', 'record_category', { 'category': cats_list.join(', ') });
這部份參考就行了,各站抓值的部份可以直接跟工程師說要抓哪裡的,再由工程師撰寫便行。
報表上呈現的結果
自訂維度設定、埋 code 都完成後,過個幾天就可以在 GA 報表上看到了。
點進 行為 –> 網站內容 –> 所有網頁,然後打開次要維度 –> 自訂維度,就可以看見我們設定的「category」:
點了以後就可以看見數值了:
如果想要獨立看某個分類的數據,用進階篩選就行。上圖按上放大鏡旁的「進階」,在包含的部份選擇設訂的自訂維度,篩選方式用完全比對,然後值填入想看的分類:
最後按下套用,就可以看見指定分類的報表了:
這篇是利用自訂維度,拿分類來當數值作範例,同理也可以拿來作標籤、相關文章、上下篇文章……等等的數據設定,只要改一下範圍或抓別的值就行。