ความช่วยเหลือ
เข้าสู่ระบบ

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

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

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

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

ในหน้านี้

การเตรียมตัวเพื่อสร้างพิกเซลที่กำหนดเอง

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

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

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

ขั้นตอน:

  1. เปิดบัญชี Google Tag Manager ของคุณ แล้วเลือกบัญชีที่คุณต้องการใช้ตั้งค่าพิกเซลที่กำหนดเอง
  2. คลิกที่ Admin จากนั้นคลิกที่ Install 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()

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

คุณสามารถสมัครรับข้อมูลเหตุการณ์ของลูกค้าโดยใช้ dataLayer ของ GTM ในโค้ดพิกเซลที่กำหนดเองของคุณ

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

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

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

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

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

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

// 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ชำระเงินเสร็จสิ้นpurchase
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?.currencyCodecurrency
event.data?.checkout?.totalPrice?.amountvalue
event.data?.checkout?.order?.idtransaction_id
event.data?.checkout?.discountAllocationscoupon
event.data?.checkout?.shippingLine?.price?.amountshipping
event.data?.checkout?.totalTaxภาษี
event.data?.checkout?.lineItemsitems

นี่คือตัวอย่างที่ใช้อิเวนต์ 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 ช่องชื่ออิเวนต์ในทริกเกอร์ต้องตรงกับคีย์ event ในพิกเซลที่คุณกำหนดเอง

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

ตัวอย่างเช่น ให้กำหนดอ็อบเจกต์ “customData” ก่อนที่คุณจะเผยแพร่อิเวนต์ที่กำหนดเองใดๆ ดังนี้

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

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

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

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

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

URL ของหน้าที่ชัดเจนยิ่งขึ้น

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

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

เมื่อโหลด GA4 ภายในแซนด์บ็อกซ์พิกเซลของ 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 ใดบ้างบนหน้าเว็บ อย่างไรก็ตาม ฟีเจอร์ Troubleshoot tag ของ Google Tag Assistant ไม่สามารถใช้งานร่วมกับพิกเซลที่กำหนดเองได้ และจะไม่ตรวจจับแท็ก Google ใดๆ ในพิกเซลที่กำหนดเอง หรือพิกเซลอื่นๆ ที่ GTM โหลด