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

หน้านี้พิมพ์ขึ้นเมื่อ Jul 27, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

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

เมื่อคุณพร้อมที่จะทดสอบพิกเซลแบบกำหนดเองของคุณ คุณสามารถใช้ส่วนขยาย Chrome - Google Tag Assistant Legacy Chrome เพื่อทดสอบพิกเซลแบบกำหนดเองได้ Google Tag Assistant ไม่สามารถทำงานร่วมกับพิกเซลแบบกำหนดเองได้

ในหน้านี้

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

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

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

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

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

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

ขั้นตอน:

เปิดบัญชี Google Tag Manager แล้วเลือกบัญชีที่คุณต้องการตั้งค่าพิกเซลแบบกำหนดเอง
คลิกที่ “ผู้ดูแล” จากนั้นคลิก “ติดตั้ง Google Tag Manager” เพื่อเปิดรหัสการติดตั้ง
คัดลอกบล็อกโค้ดที่อยู่ในส่วน head ของหน้า
ลบแท็ก HTML ออกจากบล็อกโค้ดนี้ ตัวอย่างเช่น <script></script>
ใส่โค้ดที่เหลือลงในพิกเซลแบบกำหนดเองของ Shopify ใหม่
สมัครรับข้อมูลเหตุการณ์ของลูกค้าและพุชไปยัง dataLayer ของ GTM
หากต้องการตรวจสอบลักษณะที่โค้ดจะแสดงให้ดูที่ตัวอย่างพิกเซลแบบกำหนดเองของ Google Tag Manager
กำหนดค่า Google Tag Manager ให้ยอมรับเหตุการณ์จากพิกเซลแบบกำหนดเอง
ตัวเลือกเสริม: หากคุณมีการเรียกใช้ 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 ของคุณ คุณสามารถสมัครรับข้อมูลกิจกรรมมาตรฐานและกิจกรรมแบบกำหนดเองเพิ่มเติมได้

// 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 กิจกรรมที่เทียบเท่ากันใน GTM
กิจกรรมของ 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 เข้ากันไม่ได้กับความสามารถในการปรับขนาดการชำระเงิน คุณจึงต้องใช้ส่วนขยาย 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>

เคล็ดลับในการตั้งค่า 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 แบบใดก็ได้

การทดสอบและแก้ไขจุดบกพร่อง

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

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

ในหน้านี้

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

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

ขั้นตอน:

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

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

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

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

เปลี่ยน dataLayer.push(data) แบบเดิม

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

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

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

การทดสอบและแก้ไขจุดบกพร่อง

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง