สร้างพิกเซลแบบกำหนดเองของ Google Tag Manager

คุณสามารถใช้ Google Tag Manager (GTM) เป็นพิกเซลแบบกำหนดเองเพื่อจัดการพิกเซลของผู้ให้บริการภายนอกได้

เมื่อคุณพร้อมที่จะทดสอบพิกเซล GTM แบบกำหนดเอง ให้ใช้ Shopify Pixel Helper เพื่อให้แน่ใจว่าระบบจะเพิ่มทุกเหตุการณ์ที่คุณต้องการติดตามไว้ใน Sandbox โดยไม่มีข้อผิดพลาด

นอกจากนี้ คุณยังสามารถใช้ส่วนขยายหน้า Google Tag Assistant เพื่อทดสอบว่ากำลังโหลดแท็ก Google รายการใดในหน้านั้น อย่างไรก็ตาม ฟีเจอร์ของ Google Tag AssistantTroubleshoot tag ใช้งานร่วมกับพิกเซลแบบกำหนดเองไม่ได้ และตรวจไม่พบแท็ก Google ในพิกเซลแบบกำหนดเองหรือพิกเซลอื่นๆ ที่ GTM โหลดไว้

หมายเหตุ

ก่อนสร้างพิกเซลแบบกำหนดเอง คุณควรตรวจสอบแอปที่มีให้บริการเพื่อค้นหาแอปที่มีความเสถียร ความปลอดภัย และประสิทธิภาพที่มากขึ้น แต่หากไม่มีแอปที่ตรงตามความต้องการของคุณ ก็สามารถใช้ Google Tag Manager เป็นพิกเซลแบบกำหนดเองได้

การเตรียมสร้างพิกเซลแบบกำหนดเอง

ก่อนที่คุณจะสร้างพิกเซลแบบกําหนดเองโดยใช้ Google Tag Manager โปรดตรวจสอบข้อมูลต่อไปนี้เพื่อให้แน่ใจว่าคุณเข้าใจวิธีกําหนดค่าพิกเซลของคุณ:

• สร้างหรือเปิดบัญชี Google Tag Manager และรับรหัสคอนเทนเนอร์ GTM
• ตัวจัดการแท็กที่โหลดใน Sandbox ของเราจะมีข้อจํากัดเช่นเดียวกับพิกเซลอื่นๆ เพื่อความปลอดภัยดูข้อมูลเพิ่มเติมเกี่ยวกับข้อจำกัด Sandbox พิกเซล

สร้างพิกเซลแบบกำหนดเองของ Google Tag Manager

คุณสามารถสร้างพิกเซลแบบกำหนดเองของ Google Tag Manager เพื่อจัดการพิกเซลของผู้ให้บริการภายนอกได้

ขยายธุรกิจของคุณให้เติบโต

นี่คือบทแนะนำการใช้งานขั้นสูงและไม่รองรับโดย Shopify หากคุณต้องการความช่วยเหลือในการเพิ่มพิกเซลแบบกำหนดเอง คุณสามารถจ้าง Shopify Partner ได้

ขั้นตอนมีดังนี้

1. เปิดบัญชี Google Tag Manager แล้วเลือกบัญชีที่คุณต้องการตั้งค่าพิกเซลแบบกำหนดเอง
2. คลิกที่ “ผู้ดูแล” จากนั้นคลิก “ติดตั้ง Google Tag Manager” เพื่อเปิดรหัสการติดตั้ง
3. คัดลอกบล็อกโค้ดที่อยู่ในส่วน head ของหน้า
4. ลบแท็ก HTML ออกจากบล็อกโค้ดนี้ ตัวอย่างเช่น <script></script>
5. ใส่โค้ดที่เหลือลงในพิกเซลแบบกำหนดเองของ Shopify ใหม่
6. สมัครรับข้อมูลเหตุการณ์ของลูกค้าและพุชไปยัง dataLayer ของ GTM
7. หากต้องการตรวจสอบลักษณะที่โค้ดจะแสดงให้ดูที่ตัวอย่างพิกเซลแบบกำหนดเองของ Google Tag Manager
8. กำหนดค่า Google Tag Manager ให้ยอมรับเหตุการณ์จากพิกเซลแบบกำหนดเอง
9. ตัวเลือกเสริม: หากคุณมีการเรียกใช้ dataLayer.push(event) ในไฟล์ checkout.liquid ของคุณ ให้แทนที่ด้วย analytics.publish()

สมัครรับข้อมูลเหตุการณ์ของลูกค้าและพุชไปยังชั้นข้อมูลของ GTM

คุณสามารถสมัครรับข้อมูลกิจกรรมของลูกค้าได้โดยใช้ข้อมูล dataLayer ของ GTM ในโค้ดพิกเซลแบบกำหนดเอง

ตามค่าเริ่มต้น จะมีชุดกิจกรรมแบบมาตรฐานที่คุณสามารถสมัครรับข้อมูลได้ อย่างไรก็ตาม หากคุณต้องการติดตามกิจกรรมของลูกค้าที่ไม่ได้เป็นส่วนหนึ่งของกิจกรรมมาตรฐานที่เสนอ คุณสามารถเผยแพร่กิจกรรมแบบกำหนดเอง ได้จากไฟล์เทมเพลต Liquid

ด้านล่างนี้เป็นตัวอย่างการสมัครรับข้อมูลเหตุการณ์ “product_viewed” มาตรฐานที่จะระบุว่ามีผู้ดูสินค้า โดยเมื่อเหตุการณ์ทริกเกอร์ จะพุชเหตุการณ์ไปยัง dataLayer

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    product_title: event.data?.productVariant?.title,
  });
});

ในตัวอย่างนี้ ชื่อสินค้าจะถูกส่งผ่านใน Payload ของกิจกรรมคุณสามารถใช้ตัวแปร Google Tag Manager เพื่อดึงชื่อสินค้าจาก Payload ของกิจกรรมในแท็กที่คุณเลือกได้

ตัวอย่างพิกเซลแบบกำหนดเองของ Google Tag Manager

ตัวอย่างด้านล่างคือพิกเซลแบบกำหนดเองของ Google Tag Manager ในรูปแบบที่ลดความซับซ้อนลงซึ่งแสดงวิธีการส่งข้อมูลไปยัง Google Tag Manager หากคุณต้องการพุชกิจกรรมเพิ่มเติมไปยัง dataLayer ของคุณ คุณสามารถสมัครรับข้อมูลกิจกรรมมาตรฐานและกิจกรรมแบบกำหนดเองเพิ่มเติมได้

หมายเหตุ

ตัวอย่างพิกเซลนี้ยังประกอบด้วยตัวอย่างการตั้งค่าที่สะท้อนถึงโหมดความยินยอมของ Google v2 ซึ่งเป็นโหมดที่อนุญาตให้พิกเซลเคารพตัวเลือกความยินยอมคุกกี้ของผู้เยี่ยมชมสำหรับยอดเข้าชมร้านค้ารวมถึงเขตเศรษฐกิจยุโรป (EEA) คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับโหมดความยินยอมได้จากฝ่ายช่วยเหลือของ Google Ads

การตั้งค่าตัวอย่างเหล่านี้อาจไม่ตรงกับสิ่งที่จำเป็นสำหรับร้านค้าของคุณตามกฎหมายความเป็นส่วนตัวของภูมิภาคของคุณ หากคุณต้องการความช่วยเหลือในการเพิ่มหรือปรับแต่งการตั้งค่าความยินยอมในพิกเซลที่คุณกำหนดเอง ให้ตรวจสอบโหมดความยินยอมในการตั้งค่าของ Google ในคู่มือของเว็บไซต์ หรือจ้าง Shopify Partner

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(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');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_shipping_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

กำหนดค่า Google Tag Manager ให้ยอมรับกิจกรรมจากพิกเซลแบบกำหนดเอง

หลังจากสร้างพิกเซลแบบกําหนดเองแล้ว คุณต้องกําหนดค่า Google Tag Manager เพื่อยอมรับกิจกรรมจากพิกเซลแบบกําหนดเองของคุณ หากต้องการดำเนินการดังกล่าว คุณต้องมีแท็ก ทริกเกอร์ และตัวแปร dataLayer ใน Google Tag Manager

ตัวอย่างบางส่วนของกิจกรรมแบบมาตรฐานของลูกค้า และกิจกรรมที่เทียบเท่าใน Google Tag Manager จะระบุไว้ในตารางต่อไปนี้

รายการเหตุการณ์ของลูกค้า Shopify มาตรฐานเพื่อใช้กับพิกเซล เมื่อเทียบกับเหตุการณ์ของลูกค้าที่เทียบเท่าใน Google Tag Manager รวมถึงทริกเกอร์ที่ต้องมีเพื่อดำเนินเหตุการณ์ดังกล่าว

กิจกรรมของ Shopify	ทริกเกอร์	กิจกรรมของ GTM
payment_info_submitted	ส่งข้อมูลการชำระเงิน	add_payment_info
checkout_address_info_submitted	ส่งข้อมูลการจัดส่ง	add_shipping_info
product_added_to_cart	เพิ่มสินค้าไปยังตะกร้าสินค้า	add_to_cart
checkout_started	เริ่มการชำระเงิน	begin_checkout
checkout_completed	ดำเนินการชำระเงินให้เสร็จสิ้น	ซื้อ
product_removed_from_cart	ลบรายการออกจากตะกร้าสินค้าหรือไม่	remove_from_cart
cart_viewed	ดูตะกร้าสินค้า	view_cart
product_viewed	ดูหน้ารายละเอียดสินค้า	view_item
collection_viewed	ดูรายการสินค้า	view_item_list

พารามิเตอร์กิจกรรมแท็ก GTM ต้องตรงกับแบบแผนการตั้งชื่อที่กำหนด ทั้งนี้ก็เพื่อให้ระบบประมวลผลกิจกรรม dataLayer สำหรับพิกเซลแบบปรับแต่งเอง

ตัวอย่างบางส่วนขององค์ประกอบกิจกรรม dataLayer สำหรับพิกเซลแบบปรับแต่งเอง และพารามิเตอร์กิจกรรมใน Google Analytics 4 (GA4) ที่เทียบเท่ากันมีดังนี้

รายการกิจกรรม dataLayer สำหรับพิกเซลแบบกำหนดเองที่ใช้แบบแผนการตั้งชื่อแบบ GA4

กิจกรรม dataLayer สำหรับพิกเซลแบบปรับแต่งเอง	พารามิเตอร์กิจกรรม GA4
event.data?.checkout?.currencyCode	เงินตรา
event.data?.checkout?.totalPrice?.amount	value
event.data?.checkout?.order?.id	transaction_id
event.data?.checkout?.discountAllocations	coupon
event.data?.checkout?.shippingLine?.price?.amount	shipping
event.data?.checkout?.totalTax	tax
event.data?.checkout?.lineItems	items

ต่อไปนี้คือตัวอย่างการใช้กิจกรรม checkout_completed

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

ทริกเกอร์ Google Tag Manager คือประเภทกิจกรรมที่กำหนดเองโดยระบุชื่อกิจกรรม checkout_completed ช่องชื่อกิจกรรมในทริกเกอร์ต้องตรงกับคีย์กิจกรรมในพิกเซลแบบกำหนดเองของคุณ

orderId และสกุลเงินเป็นตัวแปรที่คุณใช้ใน Google Tag Manager เพื่อรวบรวมข้อมูลจากเหตุการณ์ต่างๆ โดยสามารถแม็ปกับตัวแปร dataLayer ใน Google Tag Manager ได้ ตัวแปรเหตุการณ์แต่ละตัวต้องมีตัวแปร dataLayer ของตัวเอง ตั้งค่าทริกเกอร์ให้ทำงานในกิจกรรมที่กำหนดเองทั้งหมด

สร้างแท็กที่ใช้ทริกเกอร์ที่คุณเพิ่งสร้าง เพิ่มตัวแปรที่คุณต้องการจัดเก็บใต้พารามิเตอร์กิจกรรม ในตัวอย่างข้างต้น orderId, currency, price, shippingLine และ totalTax จะถูกตั้งค่าเป็นตัวแปร dataLayer แต่ละครั้งที่แท็กเริ่มทำงาน ระบบจะจัดเก็บตัวแปร dataLayer เหล่านี้พร้อมกิจกรรม

โปรดทราบว่าต้องตั้งค่าแท็กและทริกเกอร์อย่างน้อยหนึ่งรายการใน Google Tag Manager เพื่อให้ระบบถ่ายโอนข้อมูลได้

เปลี่ยนการเรียกใช้ dataLayer.push(event) แบบเดิม เป็น analytics.publish()

หากคุณได้ตั้งค่า Google Tag Manager ไว้ก่อนหน้านี้ คุณจะต้องแทนที่การเรียกใช้ dataLayer.push ด้วยการเรียกใช้ Shopify.analytics.publish() คุณสามารถค้นหาการเรียกใช้ dataLayer.push ของคุณในไฟล์ theme.liquid ได้ในส่วนเลย์เอาต์ของตัวแก้ไขธีมของคุณ

นอกจากนี้ คุณยังต้องแทนที่การเรียกใช้ dataLayer.push ใน checkout.liquid อย่างไรก็ตาม เนื่องจาก checkout.liquid เข้ากันไม่ได้กับ Shopify Extension คุณจึงต้องใช้ส่วนขยาย UI เพื่อพุชข้อมูลไปยังพิกเซลเว็บ

ด้านล่างนี้เป็นตัวอย่างง่ายๆ ของเหตุการณ์การลงทะเบียนอีเมลแบบกำหนดเองที่ติดตามโดยใช้ dataLayer ในไฟล์ theme.liquid

<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 Tag Manager มีฟีเจอร์ที่ช่วยให้คุณสามารถพุชอ็อบเจกต์ dataLayer แบบมีสถานะในทุกเหตุการณ์ได้ แม้ว่า Sandbox พิกเซลของ Shopify จะไม่มีฟีเจอร์ที่เทียบเท่า แต่คุณสามารถสร้างผลลัพธ์แบบเดียวกันได้ด้วยการสร้างออบเจ็กต์ข้อมูลของคุณเองและส่งต่อไปยังเหตุการณ์แบบกำหนดเอง

ตัวอย่างเช่น กําหนดอ็อบเจกต์ "customData" ก่อนที่จะเผยแพร่กิจกรรมแบบกําหนดเองของคุณ

<script>
  const customData = {email: customer.email}
</script>

จากนั้น เมื่อใดก็ตามที่คุณต้องการเพิ่มข้อมูลแบบกำหนดเอง ให้ส่งข้อมูลดังกล่าวไปยังวิธีการเผยแพร่ของคุณ

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

หมายเหตุ

Shopify ไม่รองรับการเพิ่มข้อมูลแบบกำหนดเองไปยังเหตุการณ์มาตรฐานในตอนนี้ หากคุณต้องการทำเช่นนั้น คุณสามารถเผยแพร่เหตุการณ์แบบกำหนดเองเพื่อแทนที่เหตุการณ์มาตรฐานได้

เคล็ดลับในการตั้งค่า Google Analytics 4

ลองใช้เคล็ดลับต่อไปนี้ในการตั้งค่า Google Analytics 4 (GA4) เมื่อใช้ Google Tag Manager เป็นพิกเซลแบบกำหนดเอง

URL หน้าที่เป็นระเบียบมากขึ้น

เมื่อ GA4 ทำงานใน Sandbox คุณอาจสังเกตเห็นว่า URL ของหน้ามีข้อมูลเกี่ยวกับ Sandbox ที่ GA4 กำลังทำงานอยู่ หากคุณต้องการลบข้อมูล Sandbox ออกจาก URL เหล่านั้น คุณสามารถปิดการติดตามหน้าอัตโนมัติของ 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_view ของ GA4 ที่จะทริกเกอร์ตามเหตุการณ์ page_viewed ของคุณได้ โดยทั่วไปแล้ว คุณสามารถใช้ประเภทแท็ก Google Analytics: เหตุการณ์ GA4 และตั้งชื่อเหตุการณ์เป็น page_view ได้ หลังจากที่คุณตั้งค่าประเภทแท็กและชื่อเหตุการณ์แล้ว คุณควรเพิ่มพารามิเตอร์สำหรับ page_location และกำหนดค่าให้เป็นค่าเดียวกันกับค่าที่คุณส่งไปยัง dataLayer ของคุณจากพิกเซลแบบกำหนดเอง

การวัดที่ปรับปรุงแล้ว

เมื่อโหลด GA4 ใน Sandbox พิกเซลของ Shopify คุณจะต้องตั้งค่าเหตุการณ์ที่ตามปกติจะสรุปโดยอัตโนมัติด้วยตนเอง ตัวอย่างเช่น การคลิกลิงก์ขาออกที่เป็นส่วนหนึ่งของการตั้งค่าการวัดที่ปรับปรุงแล้วของ 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 ให้สร้างแท็ก GA4 ที่ส่งการคลิกลิงก์ไปยัง GA4 โดยตรวจสอบให้แน่ใจว่าชื่อเหตุการณ์เป็น click เพื่อให้ตรงกับการตั้งชื่อเหตุการณ์ที่ปรับปรุงแล้วของ GA4

คุณสามารถสร้างการติดตามแบบเดียวกันสำหรับเกณฑ์ชี้วัดที่ปรับปรุงแล้วของ Google แบบใดก็ได้

การทดสอบและแก้ไขจุดบกพร่องของพิกเซลแบบปรับแต่งเอง

เมื่อคุณพร้อมที่จะทดสอบพิกเซล GTM แบบกำหนดเอง ให้ใช้ Shopify Pixel Helper เพื่อให้แน่ใจว่าระบบจะเพิ่มทุกเหตุการณ์ที่คุณต้องการติดตามไว้ใน Sandbox โดยไม่มีข้อผิดพลาด

นอกจากนี้ คุณยังสามารถใช้ส่วนขยายหน้า Google Tag Assistant เพื่อทดสอบว่ากำลังโหลดแท็ก Google รายการใดในหน้านั้น อย่างไรก็ตาม ฟีเจอร์ของ Google Tag AssistantTroubleshoot tag ใช้งานร่วมกับพิกเซลแบบกำหนดเองไม่ได้ และตรวจไม่พบแท็ก Google ในพิกเซลแบบกำหนดเองหรือพิกเซลอื่นๆ ที่ GTM โหลดไว้