Shopify Customer Events Custom Pixel
(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',
'ecommerce': {
'currency': event.data.prouctVariant.price.currencyCode,
'value' : event.data.prouctVariant.price.amount,
'items':[{
"item_id" : event.data.prouctVariant.prouct.id,
"item_name" : event.data.prouctVariant.prouct.title,
"currency" : event.data.prouctVariant.price.currencyCode,
"price" : event.data.prouctVariant.price.amount,
"item_brand" : event.data.prouctVariant.product.vendor,
"item_category" : event.data.prouctVariant.product.type,
"item_variant" : event.data.prouctVariant.title
}]
}
});
});
analytics.subscribe("collection_viewed", (event) => {
window.dataLayer.push({
'event': 'collection_viewed',
'ecommerce': {
'item_list_id' : event.data.collection.id,
'item_list_name': event.data.collection.title,
'items' :[{
"item_id" : event.data.collection.prouctVariants.product.id,
"item_name" : event.data.collection.prouctVariants.product.title,
"currency" : event.data.collection.prouctVariants.price.currencyCode,
"price" : event.data.collection.prouctVariants.price.amount
}]
}
});
});
analytics.subscribe("product_added_to_cart", (event) => {
window.dataLayer.push({
'event': 'product_added_to_cart',
'ecommerce': {
'currency' : event.data.cartLine.cost.totalAmount.currencyCode,
'value' : event.data.cartLine.cost.totalAmount.amount,
'items' :[{
"item_id" : event.data.cartLine.merchandise.product.id,
"item_name" : event.data.cartLine.merchandise.product.title,
"currency" : event.data.cartLine.merchandise.price.currencyCode,
"price" : event.data.cartLine.merchandise.price.amount,
"item_brand" : event.data.cartLine.merchandise.product.vendor,
"item_category" : event.data.cartLine.merchandise.product.type,
"item_variant" : event.data.cartLine.merchandise.title
}]
}
});
});
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
'event': 'checkout_completed',
'ecommerce': {
'transaction_id' : event.data.checkout.order.id,
'shipping' : event.data.checkout.shippingLine.price.amount,
'email' : event.data.checkout.email,
'phone' : event.data.checkout.phone,
'tax' : event.data.checkout.totalTax.amount,
/* 'coupon' : */
'currency' : event.data.checkout.currencyCode,
'value' : event.data.checkout.subtotalPrice.amount,
/* 'items':[{
"item_id" :
"item_name" :
"currency" :
"price" :
"item_brand" :
"item_category" :
"item_variant" :
}] */
}
});
});
analytics.subscribe("checkout_started", (event) => {
window.dataLayer.push({
'event': 'checkout_started',
'ecommerce': {
'currency': event.data.checkout.currencyCode,
'value' : event.data.checkout.subtotalPrice.amount,
/* 'items':[{
"item_id" :
"item_name" :
"currency" :
"price" :
"item_brand" :
"item_category" :
"item_variant" :
}] */
}
});
});
analytics.subscribe("payment_info_submitted", (event) => {
window.dataLayer.push({
'event': 'payment_info_submitted',
'ecommerce': {
'currency' : event.data.checkout.currencyCode,
'value' : event.data.checkout.subtotalPrice.amount,
/* 'payment_type' : event.data.checkout.
'items':[{
"item_id" :
"item_name" :
"currency" :
"price" :
"item_brand" :
"item_category" :
"item_variant" :
}] */
}
});
});
analytics.subscribe("checkout_shipping_info_submitted", (event) => {
window.dataLayer.push({
'event': 'checkout_shipping_info_submitted',
'ecommerce': {
'currency' : event.data.checkout.currencyCode,
'value' : event.data.checkout.subtotalPrice.amount,
/* 'shipping_tier' :
'items':[{
"item_id" :
"item_name" :
"currency" :
"price" :
"item_brand" :
"item_category" :
"item_variant" :
}] */
}
});
});
analytics.subscribe("search_submitted", (event) => {
window.dataLayer.push({
'event': 'search_submitted',
'ecommerce': {
'search_term': event.data.searchResult.query,
}
});
});
add_to_cart
<script>
document.addEventListener('DOMContentLoaded', function() {
const addToCartButton = document.getElementById('XXXXXXXXX'); //Replace XXXXXXXXX with button id.
if (addToCartButton) {
addToCartButton.addEventListener('click', function(event) {
dataLayer.push({ ecommerce: null });
dataLayer.push({
'event': 'add_to_cart',
'ecommerce': {
'currency': '{{ shop.currency }}',
'value': '{{ product.price | times: 0.01}}',
'items': [{
'item_id': '{{ product.id }}',
'item_name': '{{ product.title }}',
'item_brand': '{{ product.vendor }}',
'item_category': '{{ product.type }}',
'item_variant': '{{ product.selected_variant.sku }}',
'currency': '{{ shop.currency }}',
'price': '{{ product.price | times: 0.01}}'
}]
}
});
});
}
});
</script>
begin_checkout
<button onclick="handleBeginCheckout()">Begin Checkout</button>
<script>
// JavaScript function to handle the initiation of the checkout process
function handleBeginCheckout() {
// Clear any previous ecommerce data from the data layer
dataLayer.push({ 'ecommerce': null });
// Push the begin checkout event to the data layer with product details
dataLayer.push({
'event': 'begin_checkout',
'ecommerce': {
'currency': '{{ shop.currency }}',
'value': '{{ product.price | times: 0.01 }}',
'items': [{
'item_id': '{{ product.id }}',
'item_name': '{{ product.title }}',
'item_brand': '{{ product.vendor }}',
'item_category': '{{ product.type }}',
'item_variant': '{{ product.selected_variant.sku }}',
'currency': '{{ cart.currency }}',
'price': '{{ product.price | times: 0.01 }}'
}]
}
});
}
</script>
contact_information,add_shipping_info,add_payment_info
<script>
// Wait for the document to be ready
document.addEventListener("DOMContentLoaded", function () {
function handleCheckoutStep() {
// Define a function called 'handleCheckoutStep' to check and respond to the current checkout step.
var dataLayer = window.dataLayer || [];
// Initialize a 'dataLayer' array if it doesn't already exist or use an existing one.
if (Shopify.Checkout.step === "contact_information") {
// Check if the current step is "contact_information".
dataLayer.push({ 'ecommerce': null });
dataLayer.push({
'event': 'begin_checkout',
'ecommerce':{
'currency': "{{ shop.currency}}",
'value': '{{ checkout.total_price | money_without_currency | replace: ",","."}}',
'items': [
{% for line_item in checkout.line_items %}
{
"item_id": '{{ line_item.product_id }}',
"item_name": '{{ line_item.title }}',
"item_brand": '{{ line_item.vendor }}',
"item_variant": '{{ line_item.variant_id }}',
"quantity": '{{ line_item.quantity }}',
"price": '{{ line_item.final_price | money_without_currency | replace: ",",'.' }}'
}
{% unless forloop.last %},{% endunless %} {% endfor %}
]
}
});
} else if (Shopify.Checkout.step === "shipping_method") {
// Check if the current step is "shipping_method".
dataLayer.push({ 'ecommerce': null });
dataLayer.push({
'event': 'add_shipping_info',
'ecommerce':{
'currency': "{{ shop.currency}}",
'value': '{{ checkout.total_price | money_without_currency | replace: ",","."}}',
'items': [
{% for line_item in checkout.line_items %}
{
"item_id": '{{ line_item.product_id }}',
"item_name": '{{ line_item.title }}',
"item_brand": '{{ line_item.vendor }}',
"item_variant": '{{ line_item.variant_id }}',
"quantity": '{{ line_item.quantity }}',
"price": '{{ line_item.final_price | money_without_currency | replace: ",",'.' }}'
}
{% unless forloop.last %},{% endunless %} {% endfor %}
]
}
});
} else if (Shopify.Checkout.step === "payment_method") {
// Check if the current step is "payment_method".
dataLayer.push({ 'ecommerce': null });
dataLayer.push({
'event': 'add_payment_info',
'ecommerce':{
'currency': "{{ shop.currency}}",
'value': '{{ checkout.total_price | money_without_currency | replace: ",","."}}',
'items': [
{% for line_item in checkout.line_items %}
{
"item_id": '{{ line_item.product_id }}',
"item_name": '{{ line_item.title }}',
"item_brand": '{{ line_item.vendor }}',
"item_variant": '{{ line_item.variant_id }}',
"quantity": '{{ line_item.quantity }}',
"price": '{{ line_item.final_price | money_without_currency | replace: ",",'.' }}'
}
{% unless forloop.last %},{% endunless %} {% endfor %}
]
}
});
}
// Add more 'else if' conditions as needed for other steps.
}
handleCheckoutStep();
});
</script>
purchase
/* Use this if statement below if you drop this in checkout.liquid else use script as is in checkout settings */
/* if(Shopify.Checkout.page == "thank_you"){
ADD SCRIPT HERE} */
{% if first_time_accessed %}
<script>
dataLayer.push({ ecommerce: null });
dataLayer.push({
'event': 'purchase',
'ecommerce': {
'transaction_id': '{{ order.order_number | prepend: "#" }}',
'value': '{{ checkout.subtotal_price | money_without_currency | replace: ",","." }}',
'shipping': '{{ shipping_method.price | money_without_currency | replace: ",","." }}',
'currency': "{{ order.currency }}",
'coupon': '{{ discount.title }}',
'email': '{{ checkout.email }}',
'phone': '{{ order.phone }}',
'tax': '{{ checkout.tax_price | money_without_currency | replace: ",","." }}',
"items": [
{% for line_item in line_items %}
{
"item_id": '{{ line_item.product_id }}',
"item_name": '{{ line_item.title }}',
"currency": '{{ order.currency }}',
"item_brand": '{{ line_item.vendor }}',
"item_category": '{{ product.type }}',
"item_variant": '{{ line_item.variant_id }}',
"quantity": '{{ line_item.quantity }}',
"price": '{{ line_item.final_price | money_without_currency | replace: ",",'.' }}'
}
{% unless forloop.last %},{% endunless %} {% endfor %}
]
}
});
</script>
{% endif %}
remove_from_cart
<button onclick="handleRemoveFromCart()">Remove from Cart</button>
<script>
// JavaScript function to handle the removal of a product from the cart
function handleRemoveFromCart() {
// Clear any previous ecommerce data from the data layer
dataLayer.push({ 'ecommerce': null });
// Push the remove from cart event to the data layer with product details
dataLayer.push({
'event': 'remove_from_cart',
'ecommerce': {
'currency': '{{ cart.currency }}',
'value': '{{ product.price | times: 0.01 }}',
'items': [{
'item_id': '{{ product.id }}',
'item_name': '{{ product.title }}',
'item_brand': '{{ product.vendor }}',
'item_category': '{{ product.type }}',
'item_variant': '{{ product.selected_variant.sku }}',
'currency': '{{ cart.currency }}',
'price': '{{ product.price | times: 0.01 }}'
}]
}
});
}
</script>
select_item
<script type="text/javascript">
window.addEventListener('load', function() {
// Replace 'YOUR_CLASS_NAME_HERE' with the actual class name of the product items in your collection.
// This class should be on the clickable element that represents each product.
var productItemLinks = document.querySelectorAll(".YOUR_CLASS_NAME_HERE");
for (let i = 0; i < productItemLinks.length; i++) {
productItemLinks[i].addEventListener('click', function() {
// This code will execute when a product item is clicked.
dataLayer.push({
'event': 'select_item',
'ecommerce': {
'items': [{
'item_id': {{product.id | json}},
'item_variant': {{product.selected_variant.title | json}},
'item_name': {{product.title | json}},
'price': {{product.price | money_without_currency | replace: ',', '.' | json}},
'item_brand': {{product.vendor | json}},
'item_category': {{product.type | json}},
'item_list_name': {{collection.title | json}},
'currency': {{shop.currency | json}}
}]
}
});
});
}
});
</script>
view_cart
{% if request.page_type == 'cart' %}
<script>
var isCartPage = true;
</script>
{% else %}
<script>
var isCartPage = false;
</script>
{% endif %}
<script>
// Check the JavaScript variable to determine if it's a cart page
if (isCartPage) {
// Your custom JavaScript code for cart pages
dataLayer.push({
'event' : 'view_cart',
'ecommerce' :{
'currency' : '{{ cart.currency.iso_code }}',
'value': "{{ cart.total_price | money_without_currency | replace: ",","." }}",
}
});
}
</script>
view_item
{% if request.page_type == 'product' %}
<script>
dataLayer.push({ ecommerce: null });
dataLayer.push({
'event' : 'view_item',
'ecommerce' :{
'currency': "{{ shop.currency }}",
'value': "{{ product.price | money_without_currency | replace: ",","." }}",
'items':[{
"item_id": "{{ product.id }}",
"item_name": "{{ product.title }}",
"currency": "{{ shop.currency }}",
"item_brand": "{{ product.vendor }}",
"item_category": "{{ product.type }}",
"item_variant": "{{ product.selected_variant.title }}",
"price": "{{ product.price | money_without_currency | replace: ",",'.' }}"
}]
}
});
</script>
{% endif %}
view_item_list
{% if template contains 'collection' %}
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'view_item_list',
'item_list_id': '{{ collection.id}}',
'item_list_name': '{{ collection.title}}',
'items': [
{% for product in collection.products %}
{
'item_id': '{{product.id}}',
'item_name': '{{product.title}}',
'item_category': '{{product.type}}',
"item_brand": "{{ product.vendor }}",
'price': '{{ product.price | times: 0.01 }}'
},
{% endfor %}
]
});
</script>
{% endif %}
