Re: GA4 not registering purchases

Why are purchases not showing up in GA4 after implementation?

Erwin-Sunhats
Tourist
22 0 2

Hello,

 

I have followed this tutorial to start tracking in GA4. An implementation via GTM.

https://www.e2msolutions.com/blog/set-up-ga4-ecommerce-tracking-shopify/

It all goes well but 'purchases' do not show up in GA4.

I have implemented below script in checkout as per tutorial.

All other data is going ok, like pageviews and view_items

 

What am I doing wrong?

 

thx

Erwin

 

 

 

<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>

 

 

 

Replies 14 (14)

VortexVR
Shopify Partner
30 1 17

Dear Erwin, 

Did you manage to solve it?
I have the same problem.

Erwin-Sunhats
Tourist
22 0 2

No so far no solutions found to my question.

diegovogel
Shopify Partner
16 0 4

Do you have this somewhere before your script? 

window.dataLayer = window.dataLayer || [];

Without that you'll get a JS error and the rest of your script won't run.

Alex_Attribuly
Shopify Partner
18 1 13

Hey @Erwin-Sunhats , the code looks fine, we need check more in the store code. Do you mind to send us the store address so we will dive deeper.  I believe the latest shopify customer events+ serverside tracking will be your final solution, we have just supported it last month.

1. If you want to track your purchase and find out which campaigns drive the conversion. You may try Attribuly, it will bring your data accuracy to a new level. 

 

2. If you want to analyze the purchase in GA4, we have a roadmap to integrate attribuly with GA4 so you may also track in GA4. Let me know if you are interested, so we will offer a long time free trial to you. 

 

Thanks

 

 

Managing Attribuly. Get customer buying journey across all channels, build a better funnel with attribution, automation.
Erwin-Sunhats
Tourist
22 0 2

Hello,

 

the shop is Sunhats.eu.

 

regards

Erwin

wrayjames
Shopify Partner
3 0 0

Hey Erwin, 

 

Like others, I'd love to know if you got a solution here 🙂

 

Thanks

James

Erwin-Sunhats
Tourist
22 0 2

Hi,

 

I did not find a solution to my script. I found a developer who did a whole new tracking set up for GA4. Now it works great with more details like add-to-cart and start checkout.

diegovogel
Shopify Partner
16 0 4

@wrayjames we just set up GA4 ecommerce tracking for a client. Initially implemented the setup from e2msolutions.com but there were several issues. So we came up with our own setup per GA4 documentation. We're monitoring data to validate the results but once that's done I will post an update here with what we did. And we'd be happy to help you set things up if needed.

wrayjames
Shopify Partner
3 0 0

Fantastic, thank you 🙂

HappyTail
Excursionist
20 0 3

Hey man,

Did it solve the tracking issues?

 

diegovogel
Shopify Partner
16 0 4

@HappyTail @wrayjames 
The GA4 commerce tracking we set up is working. I'll post details below. Keep in mind that there's no "standard" setup per se -- it just depends on what you want to measure. In this case we're measuring:

  • Products viewed
  • Products added to cart
  • Completed checkouts

That said, here's what we did.

 

product.liquid

Add the script below to the top of the template. This will add an event to the data layer when a product is viewed, and will include the following product info:

  • Title
  • ID
  • Price
  • Brand
  • Categories
  • Selected variant
<script>
  window.dataLayer = window.dataLayer || [];

  window.dataLayer.push({ ecommerce: null });
    
  window.dataLayer.push({
    event: 'view_item',
    ecommerce: {
      currency: '{{shop.currency}}',
      value: {{product.price | money_without_currency | remove: ","}},
      items: [{
        item_name: '{{ product.title }}',
        item_id: "{{ product.id}}",
        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>

 

product-form.liquid

Add the script below to the bottom of the template. Make sure that the querySelector method targets your add-to-cart button. This will add an event to the data layer when a product is added to the cart, and will include the following product info:

  • Price
  • Title
  • ID
  • Brand
  • Variant
<script>
  window.dataLayer = window.dataLayer || [];

  document.querySelector('button.add-to-cart').addEventListener('click', () => {
    window.dataLayer.push({ ecommerce: null });
    window.dataLayer.push({
      'event': 'add_to_cart', /* create a custom event in GTM */
      'ecommerce': {
        'currency': '{{ shop.currency }}',
        'value': {{ product.selected_or_first_available_variant.price | money_without_currency | remove: "," }},
        'items': [
          {
            'item_name': '{{ product.title}}', 
            'item_id': '{{product.id}}',
            'price': {{ product.selected_or_first_available_variant.price | money_without_currency | remove:',' }},
            'item_brand': '{{ product.vendor }}',
            'item_variant': '{{ product.selected_or_first_available_variant.title }}'
          }
        ]
      }
    });
  });
</script>

 

Confirmation page

Go to Settings > Checkout and add the script below in the Additional scripts box. This will add an event to the data layer when a purchase is completed and will include the following transaction info:

  • Currency
  • Value
  • Tax
  • Shipping cost
  • Transaction ID
  • Items purchased (title, ID, price, brand, quantity, variant)
<script>
window.dataLayer = window.dataLayer || [];
{% if first_time_accessed %}
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
'page_type': 'purchase',
'event': 'purchase', /* create a custom event in GTM */
'ecommerce': {
'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': '{{ checkout.transactions[0].id }}', // transaction id
'items': [
{% for line_item in checkout.line_items %}
{
'item_name': '{{ line_item.product.title}}', 
'item_id': '{{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>

 

Additional setup and notes

The scripts above will simply push the data you need into the data layer. In order to actually send the data to GA you'll need to do a few additional things:

  1. Make sure the base GA4 script is on every page where you want to use GA.
  2. Send data from the data layer to GA. This can be done in GTM as outlined in the e2msolutions blog post. Skip to "Create GTM Trigger for the view_item and purchase event". 

Also note that we didn't do any of the user tracking stuff. And we already had page view tracking set up so the instructions above don't cover that.

 

Hope that helps! If anyone needs further assistance feel free to DM me.

HappyTail
Excursionist
20 0 3

Wow brother. Thanks a lot!

diegovogel
Shopify Partner
16 0 4
No problem! Good luck
wrayjames
Shopify Partner
3 0 0

Fantastic, thanks