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埋程式碼部份、載入GA時加入config、給自訂維度的值、報表上呈現的結果。GA報表,很重要的兩個名詞就是:維度、指標。簡單的說,維度是直的那排,指標是橫的那排,像這樣…
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

拿 Trello 當資料庫 建一個店家清單 – 上篇:Trello 基本使用

Vue

用 VuePress 製作說明文件頁面 – 4:佈景主題、外掛

Google Others

用 Google Cloud Platform / GCP 建 Node.js 網站

Front-End

Instagram oEmbed 嵌入 IG 貼文

Google Others

用 GCP 建立 Cloud Functions

Vue

Vue Transitions 製作簡單的 Carousel / Slider / 輪播功能

Front-End

從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

API

Imgur API:upload, load 上傳、讀取 心得筆記

Front-End

用 CSS :target 製作頁籤、手風琴功能

Front-End

幾個方便開發的 Console API 應用

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言