สร้างพิกเซลแบบกำหนดเองของ Google Tag Manager
หน้านี้พิมพ์ขึ้นเมื่อ Mar 29, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial
หน้านี้จะแสดงคําแนะนําเกี่ยวกับวิธีใช้ Google Tag Manager (GTM) เป็นพิกเซลแบบกำหนดเองเพื่อจัดการพิกเซลของผู้ให้บริการภายนอก
หมายเหตุ
ก่อนสร้างพิกเซลแบบกำหนดเอง คุณควรตรวจสอบแอปที่มีให้บริการ เพื่อค้นหาแอปที่มีความเสถียร ความปลอดภัย และประสิทธิภาพที่มากขึ้น แต่หากไม่มีแอปที่ตรงตามความต้องการของคุณ ก็สามารถใช้ Google Tag Manager เป็นพิกเซลแบบกำหนดเองได้
การเตรียมสร้างพิกเซลแบบกำหนดเอง ก่อนที่คุณจะสร้างพิกเซลแบบกําหนดเองโดยใช้ Google Tag Manager โปรดตรวจสอบข้อมูลต่อไปนี้เพื่อให้แน่ใจว่าคุณเข้าใจวิธีกําหนดค่าพิกเซลของคุณ:
สร้างพิกเซลแบบกำหนดเองของ Google Tag Manager
หมายเหตุ
นี่คือบทแนะนำการใช้งานขั้นสูงและไม่รองรับโดย Shopify หากคุณต้องการความช่วยเหลือในการเพิ่มพิกเซลแบบกำหนดเอง คุณสามารถจ้าง Shopify Partner ได้
ขั้นตอน:
เปิดบัญชี 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()
สมัครรับข้อมูลเหตุการณ์ของลูกค้าและพุชไปยัง dataLayer ของ GTM คุณสามารถสมัครรับข้อมูลกิจกรรมของลูกค้าได้โดยใช้ข้อมูล GTM dataLayer ในโค้ดพิกเซลแบบกำหนดเอง
ตามค่าเริ่มต้น จะมีชุดกิจกรรมแบบมาตรฐานของลูกค้า ที่คุณสามารถสมัครรับข้อมูลได้ อย่างไรก็ตาม หากคุณต้องการติดตามกิจกรรมของลูกค้าที่ไม่ได้เป็นส่วนหนึ่งของกิจกรรมมาตรฐานที่เสนอ คุณสามารถเผยแพร่กิจกรรมแบบกำหนดเอง ได้จากไฟล์เทมเพลต 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
ใช้กิจกรรม checkout_completed ต่อไปนี้:
analytics . subscribe ( " checkout_completed " , ( event ) => {
window . dataLayer . push ({
event : " checkout_completed " ,
orderId : event . data ?. checkout ?. order ?. id ,
currency : event . data ?. checkout ?. currencyCode ,
});
});
ทริกเกอร์ Google Tag Manager คือประเภทกิจกรรมที่กำหนดเองโดยระบุชื่อกิจกรรม checkout_completed ช่องชื่อกิจกรรม ในทริกเกอร์ต้องตรงกับคีย์กิจกรรม ในพิกเซลแบบกำหนดเองของคุณ
orderId และสกุลเงิน เป็นตัวแปรที่คุณใช้ใน Google Tag Manager เพื่อรวบรวมข้อมูลจากเหตุการณ์ต่างๆ โดยสามารถแม็ปกับตัวแปรชั้นข้อมูลใน Google Tag Manager ได้ ตัวแปรเหตุการณ์แต่ละตัวต้องมีตัวแปรชั้นข้อมูลของตัวเอง ตั้งค่าทริกเกอร์ให้ทำงานในกิจกรรมที่กำหนดเองทั้งหมด
สร้างแท็กที่ใช้ทริกเกอร์ที่คุณเพิ่งสร้าง เพิ่มตัวแปรที่คุณต้องการเก็บค่าใต้พารามิเตอร์ของกิจกรรม ในตัวอย่างข้างต้น orderId และสกุลเงิน จะถูกตั้งค่าเป็นตัวแปรชั้นข้อมูล แต่ละครั้งที่แท็กทำงาน จะมีการเก็บค่าorderId และสกุลเงิน กับกิจกรรม
โปรดทราบว่าต้องตั้งค่าแท็กและทริกเกอร์อย่างน้อยหนึ่งรายการใน 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 มีฟีเจอร์ที่ช่วยให้คุณสามารถพุชอ็อบเจกต์ชั้นข้อมูลแบบมีสถานะในทุกเหตุการณ์ได้ แม้ว่า 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 และกำหนดค่าให้เป็นค่าเดียวกันกับค่าที่คุณส่งไปยังชั้นข้อมูลของคุณจากพิกเซลแบบกำหนดเอง
การวัดที่ปรับปรุงแล้ว เมื่อโหลด 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 จะระบุไว้ในส่วนขยายด้วย คุณสามารถคลิกที่แท็กเหล่านี้เพื่อตรวจสอบข้อมูลที่ส่งไป