How to migrate to the checkout extensibility with GTM analytic and custom data layer pushes

[lynth]

I need some help with migrating to the new fully implemented checkout extensibility (including the checkout, thank you page, order status, etc.) while rebuilding our analytics implementation on the storefront. We are currently using GTM analytics with custom data layer pushes triggered by JS functions. Right now, we use the additional scripts field to track events, which involves a mix of Liquid and JavaScript.

What are the new alternatives? I know I can use customer events from CMS, but I am aware that there are some limitations because it runs in a sandbox environment, providing only a few methods to use. I had also a problem with the checkout_completed event, but I assume because I still use checkout.liquid for the thank you page (but I'm not sure). Additionally, I can't use Liquid to easily get some values and reference them to push with window.dataLayer.push

Example:

<script>
  var productsCart = [];
   {% unless cart.empty? %}
    {% for line_item in cart.items %}
     {% assign line_item_price = line_item.price %}
          var lineItemsPrice = '{{ line_item_price }}';
          var itemQuantity = "{{ line_item.quantity }}";

          productsCart.push({
            id: "{{ line_item.variant.sku }}",
            name: "{{ line_item.product.title | remove: "'" | remove: '"' }}",
            category: "{{ line_item.product.type }}",
            variant: "{{ line_item.variant.title }}",
            price: (lineItemsPrice/100).toFixed(2),
            quantity: itemQuantity ? Number(itemQuantity).toString() : "",
            list: "",
            product_id: "{{ line_item.product_id }}",
            variant_id: "{{ line_item.variant_id }}"
          });
        {% endfor %}
      {% endunless %}
</script>

Instead, I should use:

analytics.subscribe("checkout_started", async (event) => {
 // some logic, but very limited (but maybe I'm wrong? And I can use a lot of data fetching methods?)
 // event.data?.checkout?.email etc.
});

And there is a second method - Web Pixels API.

Unfortunately, if I'm correct, I can't create an app using the Web Pixels API to push data to GTM using custom data. I can only send it to some first-party app and then work on that data.

I'm a newbie when it comes to app creation, but I'm learning and open to any suggestions if you can explain the basics to me.

Is it really impossible to do it as we did before the checkout update? Or is it possible to create a simple analytics app that sends data directly to GTM?

[Liam]

Hi Lynth - I connected with the team on this and it does look like web pixels won't support sending custom data to GTM, have you looked into using custom pixels?

[lynth]

Hi Liam, thanks for your response - yes I'm working on this now. But it's not easy because it's hard to debug. I'll try this method:
https://www.youtube.com/watch?v=OMt5d7DxgqA 

Here is my implementation. Is it correct?

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

(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-***********');

  analytics.subscribe("checkout_started", (event) => {
    var eventTime = new Date().toString();
    window.dataLayer.push({
    page_type: "checkout",
    event: "checkout_start",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_purchase",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId
  });
});

What should I pick here: