GA 自訂維度的應用 分類之下的文章成效

GA 自訂維度的應用 分類之下的文章成效
GA 自訂維度的應用 分類之下的文章成效

本篇要解決的問題

GA 報表,很重要的兩個名詞就是:維度、指標。

簡單的說,維度是直的那排,指標是橫的那排,像這樣:

GA的維度、指標
GA 的維度、指標

自訂維度指的就是,除了 GA 提供預設的維度外,還可以寫自己的維度,依照不同的設定,可以看到頁面不同的成效。

比方 GA demo account 上就可以看到產品 ID 在各個頁面的成效如何:

產品ID在各個頁面的成效
產品 ID 在各個頁面的成效

本篇要解決什麼問題呢?就是當無法從網址上得到更多資訊時,就用自訂維度的方式來提供。

像是本站的網址架構為了精簡,所以設定成這樣:

https://letswrite.tw/文章名稱/

頁面標題的部份是這樣:

文章名稱 - Let's Write

精簡有精簡的好處,但同時也有壞處。

假設今天如果我想要看導覽列上,「CSS」底下的流量是多少,或是「API」這分類底下的文章流量是多少?用 GA 的話就無法看到,因為網址或網頁 title 上沒有寫上它的分類,因此用 GA 也看不出來。

這時,如果設定一個自訂維度叫「catagory」,並且設定它的值就是這篇文章的分類,就可以解決這個問題。


設訂自訂維度 後台設定

要用自訂維度,要先在 GA 後台設定。

首先,進入到 GA 管理介面,確定好帳戶後,在「資源」的部份,下方就有一個「自訂定義」的選項,點開後就會看到「自訂維度」、「自訂指標」:

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」:

GA報表 次要維度 自訂維度
GA 報表 次要維度 自訂維度

點了以後就可以看見數值了:

GA自訂維度報表
GA 自訂維度報表

如果想要獨立看某個分類的數據,用進階篩選就行。上圖按上放大鏡旁的「進階」,在包含的部份選擇設訂的自訂維度,篩選方式用完全比對,然後值填入想看的分類:

進階篩選
進階篩選

最後按下套用,就可以看見指定分類的報表了:

自訂維度 + 進皆篩選 報表
自訂維度 + 進皆篩選 報表

這篇是利用自訂維度,拿分類來當數值作範例,同理也可以拿來作標籤、相關文章、上下篇文章……等等的數據設定,只要改一下範圍或抓別的值就行。

Summary
GA 自訂維度的應用範例 抓分類下數據
Article Name
GA 自訂維度的應用範例 抓分類下數據
Description
探索 GA 自訂維度的強大應用,學習如何設定後台、嵌入 gtag 程式碼,並透過自訂維度捕捉分類下的數據。本文提供了一個實際的應用範例,展示如何在報表上呈現自訂維度的結果,以及如何利用這些數據來優化網站內容和用戶體驗。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言