gtag.js 程式碼片段簡介
如果您目前的通用 Analytics (分析) 資源使用 analytics.js,就需要為新的 Google Analytics (分析) 4 資源添加 gtag.js 程式碼片段。gtag.js 程式碼片段的結構如下:
01: <script async src="https://www.googletagmanager.com/gtag/js?id=<特定資源 ID A>"></script>
02: <script>
03: window.dataLayer = window.dataLayer || [];
04: function gtag(){dataLayer.push(arguments);}
05: gtag('js', new Date());
06:
07: gtag('config', '<特定資源 ID A>');
08:
09: gtag('config', '<特定資源 ID B>');
10:
11: gtag('event', 'sign_up', { 'method': 'email' });
12:
13: gtag('event', 'view_video', { 'send_to': '<特定資源 ID B>' });
14:
15: </script>
第 7 行程式碼:gtag 的「config」指令能為資源收集與 <特定資源 ID A> 相關聯的資料。舉例來說,如果您在 Google Analytics (分析) 4 資源中加入這個含代碼 ID 的指令,系統會將 page_view
事件傳送給該資源。
資源 ID 可用來代表不同 Google 產品,包括通用 Analytics (分析) 資源 (「UA-XXXXXXXX」)、Google Analytics (分析) 4 資源 (「G-XXXXXXXX」)、Google Ads (「AW-XXXXXXXX」) 或 Floodlight (「DC-XXXXXXXX」)。
第 11 行程式碼:gtag 的「event」指令會傳送事件。如果程式碼片段中有多個資源的「config」指令,系統會將事件傳送給「所有」資源。
以本例來說,「sign_up」參數是事件名稱,最後一個參數則是包含一組事件參數的物件;在本例中,「method」這個參數包含「email」值。
第 13 行程式碼:這裡的事件包含「send_to」這個特殊參數,可將相關事件「傳送」給特定資源。換句話說,系統只會將這個事件傳送給由 <特定資源 ID B> 指示的資源。
Google Analytics (分析) 4 資源的基本資料收集功能是透過 gtag「config」指令啟用;啟用之後,gtag「config」指令於網頁中載入時,系統會收集 page_view 事件相關資料,並將該事件視為自動收集的事件。
您可以使用特定參數來修改/封鎖網頁瀏覽命中或 page_view 事件。
資源 ID
通用 Analytics (分析) 資源 ID 的格式是「UA-XXXXXXXX」,有時也稱為追蹤 ID。在本指南中,我們稱之為「通用 Analytics (分析) 資源 ID」。
Google Analytics (分析) 4 資源的網站資料串流會使用代碼 ID,其格式為「G-XXXXXXXX」。
某些程式碼範例和說明文件可能會將這兩種 ID 都稱為「TAG_ID」。
基本資料收集
為 Google Analytics (分析) 4 資源啟用基本資料收集功能後,您就能收集下列資料:
如要為 Google Analytics (分析) 4 資源啟用基本資料收集功能,請將 gtag.js 程式碼片段 (Google 代碼) 加進每個網頁的 <head>
部分。
gtag.js 程式碼片段與 analytics.js 程式碼片段的差異
Google Analytics (分析) 4 資源的 gtag.js 程式碼片段,以及通用 Analytics (分析) 資源的 analytics.js 程式碼片段,兩者用途類似。
這兩種程式碼片段最大的差異,在於 analytics.js 程式碼另含一個「send pageview」呼叫,gtag.js 程式碼則沒有。在 gtag.js 中,網頁瀏覽是一項自動收集的事件,會隨著「config」指令一起傳送。
通用 Analytics (分析) 資源 (analytics.js)
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'TAG_ID', 'auto');
ga('send', 'pageview');
</script>
Google Analytics (分析) 4 資源 (gtag.js)
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
gtag.js 的配置設定
和 analytics.js 一樣,您可以藉由設定基本的 gtag.js 程式碼片段來控管 IP 遮蓋、Cookie 自訂項目和 Google 信號等資料收集設定;只要利用 gtag.js 中的「config」或「set」指令就能進行相關設定 (在 analytics.js 中,則是透過「set」、「create」和「require」指令來設定)。
Google Analytics (分析) 4 (「G-XXXXXXXX」) 資源支援透過 gtag.js 導入類似的 config 設定,但這些設定在通用 Analytics (分析) 資源和 Google Analytics (分析) 4 資源中不太一樣。以下列出幾點注意事項:
- IP 遮蓋的標準設定是「true」,且無法在 Google Analytics (分析) 4 資源中設定。因此,系統會使用標準事件自動遮蓋 IP 位址後才傳送給 Google Analytics (分析) 4 資源 (「G-XXXXXXXX」)。
- 如要將全域設定套用到所有已設定的資源,請使用 gtag.js 中的「set」指令將設定套用至所有的代碼 ID 和/或資源 ID。
- 請特別留意 analytics.js 中的「廣告」和「廣告個人化」功能,這類功能通常是用一行「set」指令導入。
如果您目前的 analytics.js 導入程式碼使用「set」、「create」和「require」指令,請查看有哪些指令是由系統自動在 Google Analytics (分析) 4 資源中設定,有哪些需要在 Google Analytics (分析) 4 資源的程式碼中指定 (參數對應)。
以下透過幾組範例,說明如何在 analytics.js (通用 Analytics (分析) 資源) 和 gtag.js (Google Analytics (分析) 4 資源) 中設定程式碼:
啟用基本資料收集功能;設定 User-ID
analytics.js
ga('create', 'TAG_ID', 'auto', {
userId: USER_ID
});
ga('send', 'pageview');
gtag.js
gtag('config', 'TAG_ID', {
'user_id': 'USER_ID'
});
進行 Cookie 設定
analytics.js
ga('create', 'TAG_ID', {
'cookieName': 'gaCookie',
'cookieDomain': 'blog.example.co.uk',
'cookieExpires': 60 * 60 * 24 * 28 // 以秒做為時間單位。
});
gtag.js
gtag('config', 'TAG_ID', {
'cookie_prefix': 'MyCookie',
'cookie_domain': 'blog.example.com',
'cookie_expires': 28 * 24 * 60 * 60 // 28 天,以秒數表示
});
封鎖 page_view 事件
如果您不需要在載入 config 程式碼時傳送 page_view 事件 (例如載入的是 iframe),可以調整 config 設定來封鎖 page_view 事件。舉例來說,假設在傳送 page_view 事件後有使用者登入網站,您針對「登入」這項互動使用「config」指令設定了使用者 ID,但不想再傳送一次 page_view 事件。請參閱下列程式碼範例,瞭解如何指明不傳送 page_view 事件。
gtag('config', 'TAG_ID', {
'user_id': 'USER_ID',
'send_page_view': false
});
代碼名稱
在 analytics.js 中,如要傳送資料給不同的通用 Analytics (分析) 資源,就需要使用代碼名稱。這些名稱又稱為「追蹤程式」,在 analytics.js 中用來定義該將資料傳送給哪個資源。針對初始「create」命中後發生的命中,不用再指定通用 Analytics (分析) 資源 ID,只需要指定追蹤程式的名稱。
在 gtag.js 中,Google Analytics (分析) 4 和通用 Analytics (分析) 資源都無法使用追蹤程式,因此若想將所有的命中傳送給多個資源 (同一個 Google Analytics (分析) 4 資源中的不同資料串流),請在「config」這行程式碼中指定所有的代碼 ID 或資源 ID。
事件
請參閱事件遷移指南。自訂維度和指標
您可以使用自訂維度和指標來取得更豐富的網站評估數據,以及從客戶關係管理系統等來源匯入離線資料。在通用 Analytics (分析) 資源 (「UA-XXXXXXXX」) 中,您必須先在使用者介面中建立自訂維度和指標並指派 ID,然後才能導入或匯入這類維度和指標。建立自訂維度和指標時,您可以根據命中、工作階段、使用者或產品界定其資料範圍。
在 Google Analytics (分析) 4 資源 (「G-XXXXXXXX」) 中導入自訂維度和指標的方式不同;因此,在通用 Analytics (分析) 資源中透過 analytics.js 導入的自訂維度和指標評估資料,在 Google Analytics (分析) 4 資源中必須以參數的形式重新導入。
透過 analytics.js 為通用 Analytics (分析) 資源導入自訂維度的程式碼範例如下:
ga('send', 'event', 'category_value', 'action_name', {'dimension5': 'custom data'
});
或
ga('set', 'dimension5', 'custom data');
這些自訂維度可透過 gtag.js 轉譯供 Google Analytics (分析) 4 資源使用,示範如下:
gtag('event', 'action_name', {'eventCategory': 'category_value',
'dimension5': 'custom data'
});
或
gtag('set', {'dimension5': 'custom data'});
請注意以下兩件事:
- 參數在使用者介面中完成登錄後,才會顯示在報表中。這個程序與在通用 Analytics (分析) 中登錄自訂維度相似 (有數量上限)。如果只是想查看匯出的資料或使用參數來啟用目標對象,則不需要登錄參數。
- 自訂參數的範圍一律位於事件層級 (與命中範圍相似)。這個範圍限制也適用於自動轉譯為參數的自訂參數 (gtag.js「UA-XXXXXXXX」導入),不受原始自訂維度範圍設定的影響。
自訂指標也適用相同的對應方式和注意事項,只不過登錄供報表使用的自訂指標不是文字參數,因此會從數字參數上限中扣除。
從概念上來說,通用 Analytics (分析) 資源中不同範圍的自訂維度和指標,在 Google Analytics (分析) 4 資源中可對應至下列項目:
- 命中界定範圍自訂維度:參數 (在資料收集期間,每個事件可記錄最多 25 個參數,另可登錄最多 50 個自訂維度/50 個自訂指標)
注意事項:自動收集的事件與參數可能已涵蓋原本需要用命中界定範圍自訂維度評估的部分事件與參數 - 以使用者為範圍自訂維度:使用者屬性 (可透過使用者介面登錄最多 25 個參數供製作報表)。自動收集的使用者維度不計入這個數量上限。
- 工作階段界定範圍自訂維度:Google Analytics (分析) 4 資源中沒有對應項目,請改用自訂參數或使用者屬性。
使用者屬性的最佳做法
無論在哪個平台上 (例如所有的資料串流類型),使用者屬性都會與使用者相連結,因此只適用於需要在使用者層級套用資料的情況。使用者屬性不應用於工作階段層級資料或裝置層級資料 (例如螢幕大小)。
Google Analytics (分析) 4 資源範例
gtag('set', 'user_properties', {
favorite_composer: '馬勒',
favorite_instrument: '低音提琴',
season_ticketholder: 'true'
});