2023 GA4 x Shopify 教學 | 如何在 Shopify 上容易安裝 Google Analytics 4

GA4 x Shopify 教學 | 如何在 Shopify 上安裝 Google Analytics 4
對於每一位電商商家,擁有準確的追蹤數據和報告是對於企業決策與發展來說,非常的重要。
當我們開始進行自己的線上商店數據追蹤時,也會擔心是否有正確追蹤所有的成效和數據,這時就可以透過 Google Analytics (分析)* 來幫助我們進行有效的追蹤以及幫助大幅成長商店的數據。
*Google Analytics 是 Google 提供的一項網路分析服務,用於追蹤和報告網站流量,目前是 Google Marketing Platform 品牌內的一個平台 (來源:Google Marketing Platform)。
在加入 AkoCommerce 做 Shopify 顧問、電子商務網站建設者、並支持台灣的許多線上商店後,我很清楚有許多台灣商店會需要使用許多例如 Google Analytics 等等的工具來支持數據分析。
最新 GA4 x Shopify 教學  | Shopify x GA4 教學

在台灣,使用 Universal Analytics (Google Analytics 舊版, 以下簡稱為 UA) 來追蹤電子商務商店是非常常見的,您目前可能已經在線上商店中擁有它的程式碼。但是 2023 年 7 月 1 日後,標準 Universal Analytics 媒體資源將停止處理數據! Google 強烈建議大家盡快切換到 Google Analytics 4 (以下簡稱為 GA4),GA4 是 Google 新一代的 Analytics (分析) 可同時從網站和應用程式收集以事件為基礎的資料。若想了解更多關於 GA4 的訊息,可透過我們的以下的問答內容來重新了解 GA4 定義並更知道 UA 和 GA4 之間的區別。

那究竟該如何在您的 Shopify 電商網站中,正確的將 Google Analytics 4 與 Shopify 串接成功,並提升電商的追蹤和報告能力呢 ?
不用擔心!跟你分享一個好消息 
2023 年 3 月,Shopify 通過 Google App Channel 引入了 GA4 設置——這意味著您無需代碼即可在 Shopify 商店中設置 GA4,並且仍然能夠跟踪基本的電子商務事件
我們將與您分享一份完整的 Shopify 教學來引導您完成 GA4 與 Shopify 的串接步驟,最後再展示如何使用這些功能來優化您的電商性能。

在這篇文章,我們將會跟您分享三個重點:

  • 手把手 Shopify 教學:如何將 GA4 連接到您的 Shopify 商店。可透過 Shopify Google Channel App 來連接 GA4 帳號方法 (強烈推薦). Google 代碼管理工具的方式和將 GA4 gtag.js code 埋設到 Shopify 主題程式碼的方法介紹。
  • 對 Shopify 商店來說,最重要的 GA4 報告介紹
  • Q&A:什麼是 GA4? 它對我的Shopify商店來說很重要嗎?GA4 vs. UA 的差別是什麼?還有其他方法可以追蹤 Shopify 上的電商事件嗎?
那麼,我們就開始吧!🙌

1. 手把手教學: 如何將 GA4 連接到您的 Shopify 商店

在此文章中,假設您已經設定好了 GA4 媒體資源。 
若還沒有設定完成,請參考 Shopify 的如何移轉到 GA4 說明文件來設定(埋設)您的 GA4。

在這篇文章中,將會介紹三種流行的 GA4 設定 (埋設) 方法:

⭐️ 使用 Shopify Google Channel App 連接 GA4 帳號方式 (強烈推薦)
⭐️ 使用 Google 代碼管理工具的方式
⭐️ 使用 GA4 gtag.js code 埋設到 Shopify 主題程式碼的方式

讓我們看看如何設定及這兩項有什麼區別吧!

1.1. 使用 Shopify Google Channel App 連接 GA4 帳號方式 簡單,無需代碼,強烈推薦

a. 在 Shopify 上設定 GA4 的 5 個簡單步驟

5個簡單步驟

1️⃣ 建立 GA4 資源
2️⃣ 在您的 Shopify 網站,下載 Google Channel App
3️⃣ 連接到您的 GA4 的帳戶
4️⃣ 刪除手動埋設過的 Google Analytics code (gtag.js code) 程式碼 (若有手動埋設過的話)
5️⃣
 查看您的 GA4 是否正常在活動

 

📌 第一步:建立 GA4 資源 (若有了, 請看第二步)

首先,您需要建立一個 GA4 資源。進入 GA4 管理員介面,並點擊「建立資源」。

在資源設定中,輸入您的網站名稱和 URL,最後選擇您的時區和貨幣。

最新 GA4 x Shopify 教學  | 建立 GA4 資源
最新 GA4 x Shopify 教學 | 獲得您的 GA4 追蹤 ID

 

📌 第二步:  在您的 Shopify 網站,下載 Google Channel App

  • 在 Shopify 後台,搜尋「Google Channel App」 ( Google 管道)或直接使用我們的 Google Channel App 連結,進入 App 的頁面。
  • 按 「開啟應用程式」
最新 GA4 x Shopify 教學  | Shopify 管道
最新 GA4 x Shopify 教學  | Shopify Google Channel

 

當您第一次登入 Google Channel App 應用程式頁面時,您會看到一個藍色的框,用於在不使用 Merchant Center 的情況下設定 GA4

最新 GA4 x Shopify 教學 | Shopify 連結 Google Channel 管道

若已經用 Merchant Center ,請按 「立即開始」

📌 第三步:連接到您的 GA4 的帳戶

最新 GA4 x Shopify 教學  | Shopify 連結你的 GA4 帳號

如果您的帳戶連接到許多 Google Analytics 屬性,您將在此處看到所有屬性的列表

選擇你想要追蹤的GA4 屬性,按 「連結」 就好了!

*在這一步,如果還沒有建立 GA4,您會看到一個 「找不到任何資源」的提示。您需要先建立新的 GA4 資源才可以使用此功能。
最新 GA4 x Shopify 教學  | “找不到任何資源”的提示

 

📌 第四步:刪除手動埋設過的 Google Analytics code (gtag.js code) 程式碼 (若有手動埋設過的話)。

如果您之前有手動設定(埋設)過 gtag.js code 程式碼,您需要刪除此程式碼,以免 gtag.js code 重複追蹤您的商店顧客。

  • 程式碼可能已設定到您的 theme.liquid 文件中。
  • 前往線上商店 -> 佈景主題設定 -> 編輯程式碼。
  • 前往 theme.liquid 並搜尋您的 gtag.js code 程式碼並將它移除。

*程式碼通常出現的樣式為:

<script async="" src="https://www.googletagmanager.com/gtag/js?id=X-XXXXXXXXXX"></script>      <script>// <![CDATA[ window.dataLayer = window.dataLayer || [];       function gtag(){dataLayer.push(arguments);}       gtag('js', new Date());            gtag('config', 'X-XXXXXXXXXX'); // ]]></script>
📣 請注意:如果在 Shopify 訂單感謝頁中也有設定 gtag.js code 程式碼,請前往 Shopify 後台頁面左下角 > 設定 > 結帳 > 訂單狀態頁面 > 刪除 gtag.js code 程式碼。

 

📌 第五步:

查看您的 GA4 是否正常在活動,可以使用 GA4 debug view 來查看或使用 Tag Assistant*
*Google Tag Assistant 是一款免費工具,可幫助您確保您的 Google 標籤(例如 Google Analytics、Google 標籤管理器、Adwords 轉化追蹤等)是否有正常運作。

最新 GA4 x Shopify 教學  | Tag Assistant

再檢查您的 Google 標籤 ID 是否顯示在“已找到 Google 標籤”下的標題中。

最新 GA4 x Shopify 教學  |  Tag Assistant 識別
這樣就完成啦 🎉 🎉

如果您需要進一步的 Shopify 顧問諮詢與服務,我們隨時為您提供幫助!(我需要顧問)

b.透過 Google Channel app 將 GA4 連結到  Shopify 後,您可以追蹤哪些顧客活動事件呢?

活動名稱

活動說明

page_view

顧客瀏覽網站商店的一個頁面

search

顧客搜尋網站商店的一項產品

view_item

顧客瀏覽網路商店的一項商品

add_to_cart

顧客將一項商品加到購物車

begin_checkout

顧客開始結帳流程

add_payment_info

顧客成功輸入付款資訊

purchase

顧客完成結帳流程

 
參考 Shopify 追蹤其他 Google Analytics (分析) 事件的官方文件

除了上述這些事件,若想使用 GA4 追蹤網路商店中的其他事件,請編輯佈景主題程式碼,並使用 gtag.js API 將事件傳送到您的 Google Analytics (分析) 帳戶。

您也可以將指令碼加到 Shopify 管理介面中的結帳設定,藉此追蹤售後事件

若想了解更多 gtag.js code 的方式,您可以往下閱讀更多

1.2. 方法二: 使用 GTM 的方式 

我們推薦這支來自 Loves Data 的影片,如何可以使用GTM來跟蹤事件

您可以透過這支影片更了解:

  • 如何設定 GTM 在你的 Shopify 網站
  • 如何在GA4中排除「self-referrals」
  • 在 GTM 中設置 eCommerce 事件並發送到 GA4


另外可以參考關於 Data Layer 的這支影片 :


 

您可以透過這支影片更了解:

  • 如何將資料新增到資料層(使用 dataLayer.push)。
  • 如何從資料層訪問資料(使用自訂事件觸發條件資料層變數
  • 在使用資料層時,一定需要避免的 3 個最常見的菜鳥錯誤。


1.3. 方法三: 使用 GA4 gtag.js code 埋設到 Shopify 主題程式碼的方式 

在 Shopify 通過 Shopify Google Channel App 應用程式串接 GA4 集合之前,使用 Gtag 程式碼是 Shopify 開發人員和商家的首選方式!
來自 Google 的 gtag.js 是一個可以包含在您網站上的標籤,它可讓您使用一系列 Google 服務和產品,包括 Google Ads、Google Analytics、Campaign Manager、Display & Video 360 和 Search Ads 360。 無須針對不同Google 產品帳戶管理多個程式碼,只要在整個網站上使用Google 程式碼,並將程式碼連結到多個目的地。

最新 GA4 x Shopify 教學  | 使用 GA4 gtag.js code 埋設到 Shopify 主題程式碼的方式

*圖片來源:關於 Google 代碼 - Google Developers

 

Gtag 程式碼需要整合到 Shopify 線上商店的佈景主題中,建議讓專業的程式人員來執行此設定。

接下來,我們來與您簡單分享的設定步驟:

1️⃣ 建立 GA4 資源
2️⃣ 在 Shopify 中加入 GA4 gtag.js 程式碼
3️⃣ 追蹤 purchase 事件 - 可在訂單感謝頁中安裝 Google Tag code (gtag.js code) 
4️⃣ 設定加強型電子商務 (datalayer) 
5️⃣ 確認您的程式碼是否正常執行

 

📌 步驟 1:建立 GA4 資源 (請參考上面的方法一第一步設定)

📌 步驟 2:在 Shopify 中加入 GA4 gtag.js 程式碼

接下來,您需要將 GA4 gtag.js 程式碼加入到您的 Shopify 佈景主題程式碼中。您可以通過以下步驟來完成:

  1. 登入您的 Shopify 帳戶,前往線上商店 -> 佈景主題設定 -> 編輯程式碼。
  2. 找到 theme.liquid 檔案,這是您佈景主題中的最重要的檔案。在此檔案的上半部找到 <head> 標籤
  3. 在 <head> 標籤中加入以下程式碼:
<script async="" src="https://www.googletagmanager.com/gtag/js?id=X-XXXXXXXXXX"></script>      <script>// <![CDATA[ window.dataLayer = window.dataLayer || [];       function gtag(){dataLayer.push(arguments);}       gtag('js', new Date());            gtag('config', 'X-XXXXXXXXXX'); // ]]></script>
最新 GA4 x Shopify 教學  | 加入一個 Google 程式碼。
📣 請注意:網站上每個頁面只能加入一個 Google 程式碼。

📌 步驟 3:追蹤purchase事件 - 可在訂單感謝頁中安裝 Google Tag code (gtag.js code) 

請前往 Shopify 後台 > 設定 > 結帳中的訂單狀況頁面,輸入 gtag.js code
*使用上面所提到的 Google Channel App 方式,您不需要放code在這裡也可以看到 purchase 時間,是不是很神奇呢!

最新 GA4 x Shopify 教學  | 了解顧客訂單的細節

 

想要多了解顧客訂單的細節,您需要多寫一些條件來幫助更多。
我們強烈推薦您使用這段 code - Gtag purchase by Benjamin Mangold


📌 
步驟 4:設定加強型電子商務 (使用資料層 - datalayer) 

資料層是 Google 的代碼管理工具和 gtag.js 使用的資訊,用於將資料傳送到代碼中。事件或變數可以通過資料層進行傳送,並根據變數的值設定觸發條件。

例如,如果您想在 purchase_total 的值大於 $100 美元時觸發再行銷代碼,或者基於特定事件(例如使用者點擊按鈕),您可以配置資料層以向代碼提供相關資料。資料層的物件結構是以 JSON 格式呈現的。

     資料層 - Datalayer Google

    在標準的 gtag.js 實現中,如果代碼是從產品複製並添加到網頁中,則會提供建立資料層的程式碼。
    *這個動作最好是有工程師來協助

    像閱讀更多的話,您可以來預覽Google的資料層官方文件

    📌 步驟 5:確認您的程式碼是否正常執行 (請參考上面的方法一第五步設定)

    可使用免費工具 GA4 debug view 或 Google Tag Assistant,來驗證頁面是否已正確標記。

    如果 Tag Assistant 無法識別您的標籤,請參閱 Tag Assistant 中提供的設定參考文件

     

    1.4. Google Channel App 和 Google Tag Manager 或 Google Tag code (gtag.js) 的優缺點

    Google Channel App

    GTM / Google tag code (gtag.js)

    設定操作

    簡單

    複雜,需要了解 Shopify 佈景主題的程式碼結構

    設定時間

    很快,約10分鐘左右可以完成

    取決於佈景主題的選擇, 複雜時可能會耗費數小時。

    事件追蹤

    不需要寫 code,可以自動追蹤 Shopify 重要事件

    需要寫 datalayer code 或設定 Google Tag Manager,可以追蹤自定義事件。

    專家級

    需了解基本的 shopify 設定

    對於 Liquid 程式碼、 佈景主題結構 datalayer 程式碼有非常詳細的了解。

    🌱 AkoCommerce 為你推薦
    如果您想專注於追蹤最基本的加強型電子商務事件,通過 Shopify 來連接 GA4 將是最簡單、最有效的方法。 若您想要更深入挖掘分析數據,可以考慮使用 GTM 來一起協助查看。 如果您需要進一步的 Shopify 顧問諮詢與服務,我們隨時為您提供幫助!
    (我需要更多 Shopify 專業級建議)

    2. 對 Shopify 商店而言,最重要的 GA4 報告介紹

    每個商店對所需的報告都有不同的要求。 靠著多年做電商顧問和網站建設者的經驗,我們在此列出 3 個很多電商店主都喜歡的重要報告。

    🗒️ E-commerce overview  報表數據匯報

    首先,絕對不能忽略掉電商報告 - 報表數據匯報!該報告將為您提供整個網站性能的總覽。
    通常您可以使用 Google Analytics 4 提供的默認報告匯報,再根據這些匯報,可以大致了解用戶、活動、熱門頁面、熱門事件、轉化。若有不適合的項目,您可以再選擇根據自己的喜好來自定義報告內容。

    最新 GA4 x Shopify 教學  | E-commerce overview  報表數據匯報

    🗒️ Product Performance Report 產品表現報告

    最新 GA4 x Shopify 教學  | Product Performance Report 產品表現報告
    產品表現報告對您的電商業務決策非常重要。使用此報告,您可以全面了解最熱賣的產品及它的收益。您還可以利用不同的角度來深入了解您的產品表現。
    在此案例中,我們使用流量來源來了解用戶來自何處,除此之外但還有更多選項可供您來選擇使用。

    🗒️ Purchase path exploration 購買路徑探索

    購買路徑探索是了解我們客戶行為的直觀方式. 使用漏斗探索功能。
    您可以很容易地使用一個漏斗探索,來了解客戶在購買產品之前做了什麼樣的行為。
    通過這種方式,可以更深入地了解問題可能的原因並優化您的線上商店,使客戶購物體驗更加流暢。

    最新 GA4 x Shopify 教學  | Purchase path exploration 購買路徑探索

     

    在此範例中,我們會檢查以下 4 個步驟的行為:查看商品、添加到購物車、開始結帳、購買。

    不要忘記利用Analytics (分析) 深入分析,它會運用機器學習技術及您設定的條件,幫助您解讀資料並採取行動,可幫助您輕鬆查看資訊並更了解您的產品特性。

    以下為您可以試著來了解的一些問題, 例如

    • 比較來自「自然搜尋」和「付費搜尋」的整體營收、用戶特性分析。
    • 過去 12 個月的每週收入狀況分析
    • 我的熱門頁面和網站的瀏覽數據分析

    有興趣了解有關更多的 GA4 報告和最新消息? 敬請關注!

    參考文件:

    3. Q&A

    3.1. 什麼是 GA4? 它對我的Shopify商店來說很重要嗎?

    Google Analytics 4 (GA4) 是 Google 分析的最新版本,於 2020 年 10 月發布。它主要功能在追蹤網站和應用程式用戶行,提供更智慧、更靈活及對隱私更友好的解決方案。

    GA4 的關鍵功能之一是它能夠追蹤跨平台用戶行為,使企業能夠更好地了解用戶如何跨多個設備和渠道,與其網站或應用程式進行交互、細分,更容易識別和定位特定的用戶組。

    最新 GA4 x Shopify 教學  | Google Analytics 4 (GA4)

    對於 Shopify 電子商務網站,GA4 是深入了解客戶行為和優化線上購物體驗的重要工具。 通過追蹤頁面瀏覽量、產品瀏覽量和結帳行為等指標,企業可以確定需要改進的設計、產品和營銷策略的產品領域。

    此外,GA4 加強的受眾細分功能使企業能夠通過量身打造的行銷活動來瞄準特定的客戶客群,進而提高轉化率並提高客戶忠誠度。

    GA4 對於在當今數據為主的環境中,想要保持競爭力的 Shopify 電子商務商店來說,是一個很重要的使用工具。 

    它先進的分析功能提供了對客戶行為的寶貴見解,使企業能夠做出數據驅動的決策並優化他們的在線體驗

    想學更多關於 GA4 的知識嗎?您可以前往 Google Analytics (分析) 4 帳戶訓練指南和支援 來研究。

    3.2. GA4 vs. UA 的區別

    特徵

    Google Analytics 4 (GA4)

    Universal Analytics (UA)

    跨平台追蹤

    基於事件的數據模型

    先進的機器學習

    隱私保護

    加強的受眾觀察

    有限

    即時資料處理

    可自定義報告

    以用戶為中心的報告

    與 Google Ads 集合

    與 Google Marketing Platform 集合

    資料保留期限

    14 個月

    可自定義

     

    總體而言,與 UA 相比,GA4 提供了更多進階的功能,特別是在跨平台追蹤、機器學習和隱私方面。 GA4 在事件的資料模型上還提供了對用戶行為的詳細分析。而在用戶為中心的報告中,企業能夠更好地了解個人用戶使用旅程。 

    然而,GA4 和 UA 都是可自訂並提供及時的資料處理,是分析網站和應用程式效能的有用工具。

    📣 請注意:2023 年 7 月 1 日後,標準 Universal Analytics 媒體資源將停止處理數據。 Google 強烈建議您盡快切換到 Google Analytics 4。

    3.3. 還有其他方法可以追蹤 Shopify 上的電子商務事件嗎?

    您可以通過 Shopify Analytics - Shopify 的分析和報告功能可提供您檢視商店近期活動的管道,讓您深入瞭解訪客,並分析線上商店速度和商店交易情形。

    • 直接在 Shopify 後台中,看到商店的整體狀況。
    最新 GA4 x Shopify 教學  | Shopify 後台分析
    • Shopify 方案需要訂閱到 Advanced 或 Shopify Plus 才可以看到無限制的分析報告。
    分析與報告
    (按一下連結可查看詳細資訊)
    Shopify Lite Shopify Starter/Basic Shopify   Shopify   Advanced Shopify Shopify Plus
    「分析」頁面
    財務報告
    (包含稅金及付款)
    產品分析
    實況瀏覽 -
    客戶開發報告 -
    庫存報告 -  (5 項,總共 7 項)
    行為報告 -  (5 項,總共 6 項)
    行銷報告 -  (1 項,總共 5 項)
    訂單報告 - -
    銷售量報告 - -
    零售銷售額報告 - -
    利潤報告 - -
    顧客報告 - -  (7/9)
    自訂報告 - - -

     

    👉 若想得知最新 Shopify 教學 與 Shopify 台灣的消息,請歡迎關注與追蹤我們 Ako - Akohub & AkoCommerce - 台灣第一個 Shopify Partner 與唯一的 Shopify Plus Partner。
    👉 Shopify 開店相關問題,也歡迎填寫 Shopify 開店諮詢表單
    Shopify 台灣案例分享
    回到操作教學