GTM + GA4 Ecommerce tracking

Hi!

I have implemented google tag manager and google analytics 4 on my website and have some tracking running. I cant seem get  common e-commerce data. I have implemented "view_item" and "add_to_cart" tracking but it wont show in GA4. I have created a custom event in GTM. But in the preview mode I cant find any such event firing. I can se purchases though, both in the GTM preview mode and in the GA4 data. 

I have Squarespace Commerce Basic Plan.

I'm pretty new at this and followed a youtube tutorial. I think it was this one: 

The current integration for GA4 is very poor.

Standard page_view events aren't being passed over and for the "events" they passover like purchase they are missing many parameters you'd expect to see in GA4 ecommerce reporting. As well the attribution is broken with all events reporting as direct (event with referral exclusions configured and added as domains in the data stream) Some pageview include a page title but are missing the page_location) 

If you are looking to track where users are coming from acuity doesn't seem to be the platform to use.

Thank you! Sad to hear that this is the case. Suppose there isn't a workaround?

You could attempt to do it with GTM for view_item and add_to_cart by grabbing the meta data that seems to appear for products and create a simple item array and pass that along. 

I also see this JSON in the html code which you can try and grab as variables to reuse in GTM.

"name":"Free Introductory Class (18Jan23) \u2014 Advanced Coaching Practicum",
"image":"http://static1.squarespace.com/static/606fac27ab8eb21ff5f16564/60b3ab98d093263ad52f5867/63c029671767ad706d92baa3/1627923825482/Free+Intro.png?format=1500w",
"description":"",
"brand":"Advanced Coaching Practicum",
"offers":{
"price":0.00,
"priceCurrency":"USD",
"url":"https://www.advancedcoachingpracticum.com/store/p/free-introductory-class-5chgk-mkztn-5h9wz-6j8tp-swxk5-gk85z",
"availability":"InStock",
"sku":"SQ3672870",
"@context":"http://schema.org",
"@type":"Offer"},
"@context":"http://schema.org",
"@type":"Product"}

Static.SQUARESPACE_CONTEXT, script[type="application/json"] for cart and checkout data, meta tags, and certain attributes like data-test, data-testid, and data-content-field can be utilized to gather collection and product details. However, it is important to note that some Squarespace themes utilize AJAX for page handling, which can potentially complicate the process of data collection.

Hey @ebba_emilia I was struggling with this same problem, and recently figured out how to implement GA4 ecommerce tracking on my website.

Now I'm able to measure how many people view my products, select a item, add to cart, remove from cart, begin checkout, and make a purchase in GA4:

To make it easier for other Squarespace users, I created a GitHub repo for folks to simply copy and paste the code into their own Google Tag Manager containers: https://www.tayloreddata.com/blog/how-to-track-ga4-ecommerce-events-on-your-squarespace-website

Let me know if you have any questions!

@TayloredData Thanks for your blog post, I'm looking through it now.  Is it missing where you set the data layer variables though? 

I see them in the screenshot for "Tag Configuration" under Event Parameters eg: {{DLV - item_variant_size}}. However I can't see anywhere where you set these variables? 

I'm fumbling my way through this so not sure if I'm on the right track here!  Would it be something like:
 

1. Name: DLV - item_variant_size

   • Type: Data Layer Variable

   • Variable Name: ecommerce.item_variant_size

I thought that the problem was that you could not get a GTM to fire on the page where the purchase values are unloaded. Can you confirm that is still the case.

On 1/23/2024 at 2:22 AM, GlynMusica said:

I thought that the problem was that you could not get a GTM to fire on the page where the purchase values are unloaded. Can you confirm that is still the case.

Hi @GlynMusica that's not the case. You can't load GTM on the secure checkout page (the page where the user pays) since it's a third party payment system, but you can load GTM on the confirmation page where the purchase values are.

Here's a screenshot of my purchase confirmation page with the GTM debugger open. You can see that I'm able to push the purchase data to the data layer:

On 1/20/2024 at 4:04 PM, sanfly said:

@TayloredData Thanks for your blog post, I'm looking through it now.  Is it missing where you set the data layer variables though? 

I see them in the screenshot for "Tag Configuration" under Event Parameters eg: {{DLV - item_variant_size}}. However I can't see anywhere where you set these variables? 

I'm fumbling my way through this so not sure if I'm on the right track here!  Would it be something like:
 

1. Name: DLV - item_variant_size

   • Type: Data Layer Variable

   • Variable Name: ecommerce.item_variant_size

Hi @sanfly, you're on the right track! The variable name would be item_variant_size 😊

I've updated my blog post to include setting up the data layer variables in Google Tag Manager: https://www.tayloreddata.com/blog/how-to-track-ga4-ecommerce-events-on-your-squarespace-website#ecommerce-event-parameters

On 1/24/2024 at 12:20 PM, TayloredData said:

Hi @GlynMusica that's not the case. You can't load GTM on the secure checkout page (the page where the user pays) since it's a third party payment system, but you can load GTM on the confirmation page where the purchase values are.

Here's a screenshot of my purchase confirmation page with the GTM debugger open. You can see that I'm able to push the purchase data to the data layer:

That's cool, thanks for that update.

I found a really cool tool the other day for helping with the debugging of GTM,  as version 1 and version 2 render slightly differently.

Take a look at a Chrome Extension called datalayerchecker. It can help surface the specific names of the variables that you need sniff on pages like this.

Assume that the trigger for that is a "contains" /order + variables.

G.