Shopify中用Custom Pixel安裝Google Analytics 4

Google Analytics Haran 8小时前 59次瀏覽 0條留言

更新時間:2025年3月17號

這篇介紹Shopify中用Custom Pixel安裝Google Analytics 4

什麼是Custom Pixel

Custom Pixel(自訂像素) 是Shopify裡的一種工具,允許商家透過添加自訂JavaScript程式碼來追蹤使用者的行為,它是在Shopify的沙箱環境(Sandbox)中運行,透過iframe的形式引入到正式環境。

每一個Custom Pixel都會有單獨的一個Sandbox環境,Sandbox的名字結構是web-pixcel-sandbox-Custom*****。

 

Custom Pixel的優缺點

優點

  • 靈活性:自訂像素允許商家編寫自己的程式碼,以追蹤標準事件之外的特定客戶行為,或將資料傳送到不支援現成應用程式的第三方平台。
  • 資料收集:透過訂閱Shopify提供的事件(例如page_viewed、product_viewed、checkout_started等),你可以擷取客戶互動數據,並將其傳遞給外部工具(如Google Analytics 4、Facebook Pixel等)。
  • 安全性:自訂像素運行在Shopify的沙盒環境(sandbox)中,這種隔離設計增強了安全性,限制了程式碼對商店其他部分的干擾,同時控制了與第三方共享的資料。
  • 無需修改主題代碼:相較於過去需要手動將像素程式碼嵌入theme.liquid或結帳腳本中,自訂像素讓管理更集中和簡單。

 

缺點

Custom Pixel是運行在沙盒中,相對線上正式環境,它是透過iframe的形式引入到正式環境,所以它會有一些限制,對於GA4來說,主要是:

  • 指標異常,如時間相關的指標追蹤不到,user_engagement事件追蹤不到,scroll事件總是觸發,跳出率很低
  • 自訂事件追蹤受限,因為它是iframe引入,所以GTM不能直接配置事件跟踪,需要透過Shopify提供的方法analytics.subscribe去實現,不是所有的事件都能追蹤到的

 

设定過程

現在Custom Pixcel裡安裝程式碼,然後在GTM裡配置,最後是測試。

Custom Pixcel里安裝程式

裡面的GTM容器ID要換成你自己,然後在Shopify裡點擊「Settings」——「Customer Events」——「Add Custom Pixel,給Custom Pixel命名,權限那裡都選擇不需要,然後就可以添加程式碼。

 

GA4裡關閉加強型評估事件

Google Analytics 4 中,點擊 「管理」——「資源設定」——「資料收集和修改」——「資料串流」——「網站串流」——「加強型評估」,就可以看到加強型評估事件的設定介面:

 

全部都不勾選,勾選這些會影響指標,如滾動次數,一打開就會觸發,因為它是iframe引入,根本沒有真正的滾動可言。

GTM里設定

關閉默認網頁瀏覽追蹤

在GTM中點選「代碼」——「新建」——「請選擇代碼類型以開始設定…」——「Google 代碼」,命名為“Disable Default PageView”,然後做如下設定:

因為Custom Pixel是安裝在Sandbox裡,而Sandbox裡的URL是不規則,如是這樣的結構/wpm@10e09e41w77fb031apd6c28ceam532d5d9a/custom/web-pixel-118 849878@4/sandbox/modern/page-name,所以不能用預設的頁面跟踪,但又需要加載Google程式碼,需要需要將send_page_view設為false,這樣就不會發送預設的頁面追蹤。

用自定事件實現網頁瀏覽追蹤

而實際的頁面追蹤會用自訂事件,程式碼裡的這一段就是:

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」,命名為dlv_page_location,做以下設定:

同理去創建資料層變數dlv_page_title。

 

在GTM中點擊「觸發條件」——「新增」——「請選擇觸發類型以開始設定…」——「自訂事件」,命名為page_viewed,做以下設定:

 

在GTM中點擊「代碼」——「新增」——「請選代碼發類型以開始設定…」——「Google Analytics (分析):GA4 事件」,命名為 “GA4-Event-PageView”, 然後做如下設定:

 

設定電商事件追蹤

接下來就是設定電商事件,可以直接用一條Tags去配置,在GTM中點擊「觸發條件」——「新增」——「請選擇觸發類型以開始設定…」——「自訂事件」,命名為All Event,做以下設定

 

 

需要勾選使用規則運算式比對:view_item|view_item_list|select_item|add_to_cart|remove_from_cart|view_cart|begin_checkout|add_payment_info|add_s hipping_info|purchase|collection_viewed|search_submitted|checkout_contact_info_submitted|checkout_address_info_submitted|form_submitted

在GTM中點擊「代碼」——「新增」——「請選代碼發類型以開始設定…」——「Google Analytics (分析):GA4 事件」,命名為 “GA4-Event-All Event”, 然後做如下設定:

設定事件參數page_location是為了獲得準確的URL。

預覽調試

由於Custom Pixel是在沙箱裡,所以GTM裡的直接預覽測試這種方式是使用不了的,有兩種測試方式:

一種是Custom Pixel裡Pixel Helper,在Custom  Pixel點選Test就可以測試:


可以看觸發的事件,以及裡面的發送的資料:

但這種方式只能看到成功發送的事件,如果有錯的時候,你不知道dataLayer是否發資料,這時候就要用另一種方​​式調試。

 

另一種是用瀏覽器的控制台,在Top這裡找到Sandbox環境,Sandbox的名字結構是web-pixcel-sandbox-Custom*****,可能會有多個

逐試,在控制台輸入dataLayer,看Custom Pixel是在哪個Sandbox運行:

就可以看dataLayer裡的資訊。

 

常見問題

問題
原因
方案
時問指標都為0
安裝Sandbox,記錄不到user_engagement事件,缺少時間的事件參數
在theme里安裝GTM,能記錄user_engagement事件,但時問指標還是不準確,這個沒辦法解決
事件跟蹤沒觸發
安裝Sandbox,適过iframe里引人
適过analytics.subscribe跟蹤服務
GTM預覽不下了
安裝Sandbox,適过iframe里引人,預覽不了
1. 測量服務的控制台中的Top切換來訪的步驟
2. 服務端追蹤可以預覽
scroll事件總是觸發
安裝Sandbox,適过iframe里引人,一打开就觸發
建議关闭滾動事件
事件觸發觸發
未知待定
Custom Pixel裡添加限制

如果您在操作上仍有任何疑問,歡迎留言交流,或加入:Google Analytics 4交流社團發問
Like (0)
發佈我的留言
取消留言
表情 贴图 加粗 删除线 居中 斜体

Hi,*为發佈留言必須填寫。

  • 顯示名稱*
  • 電子郵件地址*
  • 個人網站網址