สร้างพิกเซลแบบกำหนดเองของ 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 ออกจากบล็อกโค้ดนี้ ตัวอย่างเช่น
<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 ของคุณ คุณสามารถสมัครรับข้อมูลกิจกรรมมาตรฐานและกิจกรรมแบบกำหนดเองเพิ่มเติมได้
//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');
//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 เพื่อยอมรับกิจกรรมจากพิกเซลแบบกําหนดเองของคุณ การกระทำเช่นนี้ คุณต้องมีแท็ก ทริกเกอร์ และตัวแปรชั้นข้อมูลใน Google Tag Manager
ใช้กิจกรรม checkout_completed ต่อไปนี้:
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
order_id: event.data.checkout.order.id,
currency: event.data.checkout.currencyCode,
});
});
ทริกเกอร์ Google Tag Manager คือประเภทกิจกรรมที่กำหนดเองโดยระบุชื่อกิจกรรม checkout_completed ช่องชื่อกิจกรรมในทริกเกอร์ต้องตรงกับคีย์กิจกรรมในพิกเซลแบบกำหนดเองของคุณ
order_id และสกุลเงินเป็นตัวแปรที่คุณใช้ใน Google Tag Manager เพื่อรวบรวมข้อมูลจากเหตุการณ์ต่างๆ โดยสามารถแม็ปกับตัวแปรชั้นข้อมูลใน Google Tag Manager ได้ ตัวแปรเหตุการณ์แต่ละตัวต้องมีตัวแปรชั้นข้อมูลของตัวเอง ตั้งค่าทริกเกอร์ให้ทำงานในกิจกรรมที่กำหนดเองทั้งหมด
สร้างแท็กที่ใช้ทริกเกอร์ที่คุณเพิ่งสร้าง เพิ่มตัวแปรที่คุณต้องการเก็บค่าใต้พารามิเตอร์ของกิจกรรม ในตัวอย่างข้างต้น order_id และสกุลเงินจะถูกตั้งค่าเป็นตัวแปรชั้นข้อมูลแต่ละครั้งที่แท็กทำงาน จะมีการเก็บค่าorder_id และสกุลเงินกับกิจกรรม
โปรดทราบว่าต้องตั้งค่าแท็กและทริกเกอร์อย่างน้อยหนึ่งรายการใน 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>
กลเม็ดเคล็ดลับในการตั้งค่า 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 จะระบุไว้ในส่วนขยายด้วย คุณสามารถคลิกที่แท็กเหล่านี้เพื่อตรวจสอบข้อมูลที่ส่งไป