DataLayer push via custom pixel not working

Shopify Plus
1

Hi!

I tried using custom pixels in shopify plus to push a datalayer in the event of a purchase.

So I used this tutorial to set it up:

https://help.shopify.com/de/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

My custom pixel looks like this:

//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-XXXXXX');

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    orderId: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
    value: event.data.checkout.subtotalPrice.amount,
    shipping: event.data.checkout.shippingLine.price.amount,
    tax: event.data.checkout.totalTax.amount,
  });
});

Also I could find the variable for items (item name, item id).

In normal shopify accounts I use the checkout section under settings and it works perfect with this code:

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

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
{% if first_time_accessed %}
dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "{{ order_number }}",
      value: {{ total_price | times: 0.01 }},
      tax: {{ tax_price | times: 0.01 }},
      shipping: {{ shipping_price | times: 0.01 }},
      currency: "{{ currency }}",
      items: [
       {% for line_item in line_items %}{
        item_id: "{{ line_item.product_id }}",
        item_name: "{{ line_item.title | remove: '"' | remove: "'" | remove: '"' }}",
        currency: "{{ currency }}",
        price: {{ line_item.final_price | times: 0.01 }},
        quantity: {{ line_item.quantity }}
      },{% endfor %}
 ]
  }
});
{% endif %}
</script>

I just need the same in custom pixel and cant understand what I’m doing wrong.

Appreciate any help.

Thanks!
Kai

2

You’re not doing anything wrong - you just won’t see the data layer data in the usual way since it’s sandboxed.

You can either use the DataLayer Checker Plus Chrome extension (enable the Shopify data layer in the settings), or write the window.dataLayer in console to see the actual contents of the data layer (however, make sure to switch the JavaScript context first - you’ll be able to choose it by clicking the “Top” leftside of the filter). Hope this helps!