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

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

หน้านี้จะแสดงคําแนะนําเกี่ยวกับวิธีใช้ Google Tag Manager (GTM) เป็นพิกเซลแบบกำหนดเองเพื่อจัดการพิกเซลของผู้ให้บริการภายนอก

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

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

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

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

ขั้นตอน

  1. เปิดบัญชี Google Tag Manager แล้วเลือกบัญชีที่คุณต้องการตั้งค่าพิกเซลแบบกำหนดเอง
  2. คลิกที่ “ผู้ดูแล” จากนั้นคลิก “ติดตั้ง Google Tag Manager” เพื่อเปิดรหัสการติดตั้ง
  3. คัดลอกบล็อกโค้ดที่อยู่ในส่วน head ของหน้า
  4. ลบแท็ก HTML ออกจากบล็อกโค้ดนี้
  5. ใส่โค้ดที่เหลือลงในพิกเซลแบบกำหนดเองของ Shopify ใหม่
  6. เริ่มต้นใช้งานอ็อบเจกต์ dataLayer ที่มี window.dataLayer = window.dataLayer || [];

โค้ดพิกเซลแบบกำหนดเองของคุณควรมีลักษณะดังต่อไปนี้และ GTM-XXXXXXX ควรตรงกับรหัสคอนเทนเนอร์ GTM ของคุณ

(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 || [];

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

แทนที่จะเพิ่มการเรียกใช้ dataLayer.push() ไปยังไฟล์เทมเพลต Liquid ของคุณ คุณจะต้องจัดการ 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 สามารถส่งต่อไปยังแท็กอื่นๆ ได้

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

หากคุณได้ตั้งค่า Google Tag Manager ไว้แล้ว คุณจะต้องเปลี่ยนการเรียกใช้ dataLayer.push เป็นการเรียกใช้ Shopify.analytics.publish()

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

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

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

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

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

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

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

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

เมื่อโหลด 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 แบบใดก็ได้

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

  1. เปิดร้านค้า Shopify ของคุณในเบราว์เซอร์ Chrome
  2. เปิดแท็บเครือข่ายในเบราว์เซอร์ของคุณ แล้วค้นหาคำขอที่ชื่อว่า collect?... ซึ่งจะมีรหัสการวัด GA4 ของคุณหากมีการส่งข้อมูลจาก Google Tag Manager ของคุณไปยัง GA4
  3. ในบัญชีผู้ใช้ Google Analytics ของคุณ ให้คลิกที่ “ผู้ดูแลระบบ” จากนั้นคลิก “มุมมองการแก้ไขจุดบกพร่อง”
  4. ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มส่วนขยายการแก้ไขจุดบกพร่อง GA ของ Google ไปยังเบราว์เซอร์ Chrome ของคุณแล้ว:
    • เปิดการแก้ไขจุดบกพร่อง GA
    • เปิดร้านค้า Shopify ของคุณในอีกแท็บหนึ่ง
    • กลับไปที่ GA4 ในมุมมองการแก้ไขจุดบกพร่องและตรวจสอบเหตุการณ์ page_viewed

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

ทดลองใช้งานฟรี