โค้ด Data Layer สำหรับการซื้อใน Google Tag Manager

โค้ด Data Layer การซื้อของ Google Tag Manager

โค้ดเหล่านี้ใช้สำหรับทำ Data Layer การซื้อ

เราสามารถวางไว้ในการตั้งค่า > เช็คเอาต์ > สคริปต์เพิ่มเติม

<script>{% if first_time_accessed %}
window.dataLayer.push({
'page_type': 'purchase',
'event': 'purchase', /* create a custom event in GTM */
'transaction_id': '{{ order.name || order.order_number }}',
'totalValue': {{ total_price | money_without_currency | remove:',' }}, // Includes tax & shipping
'subtotalValue': {{ subtotal_price | money_without_currency | remove:',' }},
'tax': {{ tax_price | money_without_currency | remove:',' }},
'shipping': {{ shipping_price | money_without_currency | remove:',' }},
'currency': '{{ shop.currency }}',
'payment_type': '{{ order.transactions[0].gateway }}', //optional parameter
'ecommerce': {
'checkout_currency': '{{ checkout.currency }}', 
'value': '{{ checkout.total_price | money_without_currency | remove:',' }}', // order total (price of all products + shipping)
'tax': '{{ checkout.tax_price | money_without_currency | remove:',' }}', // tax
'shipping':'{{ checkout.shipping_price | money_without_currency | remove:',' }}', // shipping costs
'transaction_id': '{{ transactions[0].id }}', // transaction id
'items': [
{% for line_item in line_items %}
{
'item_name': '{{ line_item.product.title | replace: "'","##@@singleinvertedcomma@@##" }}'.replace("##@@singleinvertedcomma@@##", "'"), 
'item_id': '{{ line_item.sku || line_item.product.id }}',
'price': {{ line_item.final_price | money_without_currency | remove:',' }},
'item_brand': '{{ line_item.vendor }}',
'quantity': {{ line_item.quantity }},
'item_variant': '{{ line_item.variant.title }}'
},
{% endfor %}
]
}
});
{% endif %}
</script>

โค้ดด้านบนใช้กับโค้ด Google Tag Manager ด้านล่าง:

<!-- Google Tag Manager -->
<script>(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-     ');</script>
<!-- End Google Tag Manager -->

หมายความว่าเราสามารถรวมทั้งหมดเข้าด้วยกันที่การตั้งค่า > เช็คเอาต์ > สคริปต์เพิ่มเติม ตามที่ระบุไว้ด้านล่าง:

<script>{% if first_time_accessed %}
window.dataLayer.push({
'page_type': 'purchase',
'event': 'purchase', /* create a custom event in GTM */
'transaction_id': '{{ order.name || order.order_number }}',
'totalValue': {{ total_price | money_without_currency | remove:',' }}, // Includes tax & shipping
'subtotalValue': {{ subtotal_price | money_without_currency | remove:',' }},
'tax': {{ tax_price | money_without_currency | remove:',' }},
'shipping': {{ shipping_price | money_without_currency | remove:',' }},
'currency': '{{ shop.currency }}',
'payment_type': '{{ order.transactions[0].gateway }}', //optional parameter
'ecommerce': {
'checkout_currency': '{{ checkout.currency }}', 
'value': '{{ checkout.total_price | money_without_currency | remove:',' }}', // order total (price of all products + shipping)
'tax': '{{ checkout.tax_price | money_without_currency | remove:',' }}', // tax
'shipping':'{{ checkout.shipping_price | money_without_currency | remove:',' }}', // shipping costs
'transaction_id': '{{ transactions[0].id }}', // transaction id
'items': [
{% for line_item in line_items %}
{
'item_name': '{{ line_item.product.title | replace: "'","##@@singleinvertedcomma@@##" }}'.replace("##@@singleinvertedcomma@@##", "'"), 
'item_id': '{{ line_item.sku || line_item.product.id }}',
'price': {{ line_item.final_price | money_without_currency | remove:',' }},
'item_brand': '{{ line_item.vendor }}',
'quantity': {{ line_item.quantity }},
'item_variant': '{{ line_item.variant.title }}'
},
{% endfor %}
]
}
});
{% endif %}
</script>

<!-- Google Tag Manager --><script>(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- ');</script><!-- End Google Tag Manager -->

สร้างตัวแปรใหม่



เปลี่ยนชื่อตัวแปรใหม่




สร้างตัวแปร Data Layer

ชื่อตัวแปร Datalayer:	เปลี่ยนชื่อตัวแปร
user_id	“dlv – customer – id – Variable”
customer.lastOrder	“dlv – customer – lastOrder – Variable”
customer.orderCount	“dlv – customer – orderCount – Variable”
customer.tags	“dlv – customer – tags – Variable”
customer.totalSpent	“dlv – customer – totalSpent – Variable”
customer.userType	“dlv – customer – userType – Variable”
event	“dlv – event – Variable”

สร้างแท็ก:

ชื่อคุณสมบัติ	ค่า
customer_id	{{dlv – customer – id – Variable}}
last_order	{{dlv – customer – last order – Variable}}
order_count	{{dlv – customer – order count – Variable}}
total_spent	{{dlv – customer – total spent – Variable}}
user_type	{{dlv – customer – user type – Variable}}

ใส่โค้ดในไฟล์ผลิตภัณฑ์:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'view_item',
ecommerce: {
items: [{
item_name: '{{ product.title | replace: "'","##@@singleinvertedcomma@@##" }}'.replace("##@@singleinvertedcomma@@##", "'"),
item_id: "{% if product.sku %}{{ product.sku }}{% else %}{{ product.id}}{% endif %}",
price: "{{ product.price | money_without_currency | remove:',' }}",
item_brand: "{{ product.vendor | remove: "'" | remove: '"' }}",
{% for collection in product.collections %}
item_category{% unless forloop.index == 1 %}{{ forloop.index }}{% endunless %}: "{{ collection.title }}",
{% endfor %}
item_variant: "{{ product.selected_or_first_available_variant.title | remove: "'" | remove: '"' }}",
quantity: '1'
}]
}
});
</script>

สร้างทริกเกอร์:



สร้างแท็ก:



JadeCommerce.center สามารถตั้งค่า Google Analytic 4 (GA4) และ Google Tag Manager ได้ตามความรู้ของเราและเอกสารอื่นๆ จากคู่มือของ Google และคู่มือเว็บไซต์อื่นๆ ตามที่คุณต้องการ

LINE ID: @jadecommerce (มี @)



โค้ด Google Tag Manager purchase Data Layer ด้านบนมาจากคู่มือที่เว็บไซต์ด้านล่าง:
https://www.e2msolutions.com/blog/set-up-ga4-ecommerce-tracking-shopify/