สร้างพิกเซลแบบกำหนดเองของ Google Tag Manager
หน้านี้จะแสดงคําแนะนําเกี่ยวกับวิธีใช้ Google Tag Manager (GTM) เป็นพิกเซลแบบกำหนดเองเพื่อจัดการพิกเซลของผู้ให้บริการภายนอก
การเตรียมสร้างพิกเซลแบบกำหนดเอง
ก่อนที่คุณจะสร้างพิกเซลแบบกําหนดเองโดยใช้ Google Tag Manager โปรดตรวจสอบข้อมูลต่อไปนี้เพื่อให้แน่ใจว่าคุณเข้าใจวิธีกําหนดค่าพิกเซลของคุณ:
- สร้างหรือเปิดบัญชี Google Tag Manager และรับรหัสคอนเทนเนอร์ GTM
- ตัวจัดการแท็กที่โหลดใน Sandbox ของเราจะมีข้อจํากัดเช่นเดียวกับพิกเซลอื่นๆ เพื่อความปลอดภัยดูข้อมูลเพิ่มเติมเกี่ยวกับข้อจำกัด Sandbox พิกเซล
สร้างพิกเซลแบบกำหนดเองของ Google Tag Manager
ขั้นตอน
- เปิดบัญชี Google Tag Manager แล้วเลือกบัญชีที่คุณต้องการตั้งค่าพิกเซลแบบกำหนดเอง
- คลิกที่ “ผู้ดูแล” จากนั้นคลิก “ติดตั้ง Google Tag Manager” เพื่อเปิดรหัสการติดตั้ง
- คัดลอกบล็อกโค้ดที่อยู่ในส่วน
head
ของหน้า - ลบแท็ก HTML ออกจากบล็อกโค้ดนี้
- ใส่โค้ดที่เหลือลงในพิกเซลแบบกำหนดเองของ Shopify ใหม่
- เริ่มต้นใช้งานอ็อบเจกต์ 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 แบบใดก็ได้
การทดสอบและแก้ไขจุดบกพร่อง
- เปิดร้านค้า Shopify ของคุณในเบราว์เซอร์ Chrome
- เปิดแท็บเครือข่ายในเบราว์เซอร์ของคุณ แล้วค้นหาคำขอที่ชื่อว่า
collect?...
ซึ่งจะมีรหัสการวัด GA4 ของคุณหากมีการส่งข้อมูลจาก Google Tag Manager ของคุณไปยัง GA4 - ในบัญชีผู้ใช้ Google Analytics ของคุณ ให้คลิกที่ “ผู้ดูแลระบบ” จากนั้นคลิก “มุมมองการแก้ไขจุดบกพร่อง”
- ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มส่วนขยายการแก้ไขจุดบกพร่อง GA ของ Google ไปยังเบราว์เซอร์ Chrome ของคุณแล้ว:
- เปิดการแก้ไขจุดบกพร่อง GA
- เปิดร้านค้า Shopify ของคุณในอีกแท็บหนึ่ง
- กลับไปที่ GA4 ในมุมมองการแก้ไขจุดบกพร่องและตรวจสอบเหตุการณ์
page_viewed