建立 Google 代碼管理工具自訂像素
此頁面提供的說明會介紹如何將 Google 代碼管理工具 (GTM) 作為自訂像素,來管理第三方像素。
準備建立自訂像素
使用 Google 代碼管理工具建立自訂像素之前,請確認以下資訊,確保您瞭解設定像素的方式:
- 建立或開啟 Google 代碼管理工具帳戶並取得 GTM 容器 ID。
- 基於安全考量,在沙箱中載入的代碼管理工具與其他像素的限制相同。深入瞭解像素沙箱限制。
建立 Google 代碼管理工具自訂像素
步驟
- 開啟 Google 代碼管理工具帳戶,然後選取要設定自訂像素的帳戶。
- 依序點擊「管理」和「安裝 Google 代碼管理工具」以開啟安裝程式碼。
- 複製屬於
head
區段的程式碼區塊。 - 從此程式碼區塊移除 HTML 標籤。
- 將剩餘的程式碼插入新的 Shopify 自訂像素。
- 使用
window.dataLayer = window.dataLayer || [];
初始化 dataLayer 物件。
您的自訂像素程式碼應如下所示,且 GTM-XXXXXXX 應與您的 GTM 容器 ID 相符。
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');
window.dataLayer = window.dataLayer || [];
訂閱顧客事件並推送至 GTM 的 dataLayer
您會在自訂像素程式碼中執行所有 GTM dataLayer 工作,不用將 dataLayer.push() 呼叫新增至您的 Liquid 範本檔案。
依預設,您可以訂閱一組立即可用的標準自訂事件,也可以從 Liquid 範本檔案發布自己的自訂事件。
以下是訂閱標準「product_viewed」事件的範例,此事件表示有人檢視某項商品。當事件觸發時,系統會將事件推送到 dataLayer。
analytics.subscribe('product_viewed', (event) => {
window.dataLayer.push({
'event': 'product_viewed',
'product_title': event.data.productVariant.title,
});
});
此次範例中傳輸的資料為商品名稱,這些資料使用 Google 代碼管理工具變數且可轉傳給其他代碼。
使用 analytics.publish() 取代舊的 dataLayer.push(event) 呼叫
如果您先前已完成 Google 代碼管理工具的設定,則需要使用 Shopify.analytics.publish() 呼叫取代 dataLayer.push 呼叫。
以下是使用 dataLayer 跟蹤自訂電子郵件註冊事件的簡易範例。
<script>
dataLayer.push({ event: 'email_signup', email: customer.email });
</script>
Shopify 等效程式碼如下所示,此程式碼可將資料推送到您的自訂像素。
<script>
Shopify.analytics.publish('email_signup', {email: customer.email });
</script>
然後,在自訂像素程式碼中新增類似下列內容。
analytics.subscribe("email_signup", (event) => {
window.dataLayer.push({
'event': 'email_signup',
'email': event.customData.email,
});
});
取代舊的 dataLayer.push(data)
Google 代碼管理工具有一項功能,可讓您將可設定狀態的資料層物件推送至每個事件。雖然 Shopify 的像素沙箱不包含相等的功能,但您可以建立自己的資料物件並傳輸到自訂事件,來獲得相同的結果。
例如,在發布任何自訂事件之前,先定義一個「customData」物件。
<script>
const customData = {email: customer.email}
</script>
然後,每當您想包含自訂資料時,請將該物件傳入您的發布方法中。
<script>
Shopify.analytics.publish('email_signup', customData);
</script>
Google 代碼管理工具自訂像素範例
以下範例為簡化版本的 Google 代碼管理工具自訂像素,介紹如何將資料傳送到 GTM。若要將更多事件推送到您的 dataLayer,您可以訂閱更多標準和自訂事件。
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');
window.dataLayer = window.dataLayer || [];
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
'event': 'product_viewed',
'product_id': event.data.product.id,
'product_title': event.data.product.title,
});
});
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
'event': 'checkout_completed',
'order_id': event.data.order.id,
'currency': event.data.checkout.currencyCode,
});
});
設定 Google Analytics (分析) 4 的秘訣與竅門
將 Google 代碼管理工具作為自訂像素時,不妨參考下列 Google Analytics (分析) 4 (GA4) 的設定秘訣。
更簡潔的頁面網址
當 GA4 在沙箱中執行時,您可能會注意到頁面網址包含的資訊與該沙箱相關。如果要從這些網址移除沙箱資訊,您可以關閉 GA4 的自動頁面追蹤,改為透過標準 page_viewed 事件來使用自己的追蹤功能。
analytics.subscribe('page_viewed', (event) => {
window.dataLayer.push({
'event': 'page_viewed',
'page_location': event.context.window.location.href,
'page_title': event.context.document.title,
});
});
您將自己的事件發布到 dataLayer 後,您可以建立一個在 page_viewed 事件上觸發的 GA4 page_view 代碼。大多數情況下,您可以使用 Google Analytics (分析):GA4 事件代碼類型,將事件名稱設為 page_view。設定代碼類型和事件名稱後,您應為 page_location 新增參數,並將值設為您透過顧客像素傳入資料層的值。
加強型評估
在 Shopify 的像素沙箱中載入 GA4 時,您將須手動設定一些系統通常會自動推斷的事件。例如,基於安全考量,使用自訂像素時,出站連結點擊次數 (其中一項 GA4 加強型評估設定) 不會自動觸發。但是,您可以自行實作 GA4 的加強型事件評估並作為自訂事件。
下方提供的程式碼包括追蹤出站連結點擊次數的簡化範例。
<script>
function detectOutboundLink() {
// add your logic for determining if a link click is outbound
// if the link click is outbound then publish it
if (isOutboundLink) {
Shopify.analytics.publish('outbound_link', { link_url: link_url });
}
}
</script>
最後,在 GTM 中,確認該事件名稱為「click」且符合 GA4 的加強型事件命名規則,並建立會將連結點擊次數資料傳送給 GA4 的 GA4 代碼。
Google 的任何加強型評估指標都能達到相同的追蹤效果。
測試和偵錯
- 在 Chrome 瀏覽器中開啟您的 Shopify 商店。
- 在瀏覽器上開啟網路分頁並找到名為「
collect?...
」的要求,若資料已從 Google 代碼管理工具傳送至 GA4,此要求便會包含 GA4 評估 ID。 - 在 Google Analytics (分析) 帳戶中,依序點擊「管理」和「DebugView」。
- 請確認您已將 GA 偵錯擴充功能新增至 Chrome 瀏覽器:
- 啟用 GA 偵錯。
- 在單獨的分頁中開啟您的 Shopify 商店。
- 返回 DebugView 的 GA4 並查看
page_viewed
事件。