How to sent Data Layers for Google Tag Manager?

Hi

I need to send more data from Squarespace to Google Analytics via Google Tag Manager. 

How and what Code do I ade for Enhanced Ecommerce Tracking? 

If I place the code in the footer of the Order Confirmed Page it does not get sent.

I need a way to work with Data Layers.

Thank you for your help. 

 Hello, 

That's right, Squarespace does not support GTM implementation on their sites and therefore this is not supported on their checkout process, even if you're checking out users on your own domain, there's no control over what happens in the backend of that checkout page. 

However, we've found a workaround for this issue which works perfectly for us. 

So, the idea behind having Google Tag Manager on the site is so that you can track specific actions that you can't track by simply using Google Analytics - I take it that this is why you're also using GTM. 

One of the first steps we take whenever setting up GTM is to setup a "page view" tag to send this data into Analytics, which I assume you've also done. 

We also know that Squarespace and eCommerce tracking through GTM doesn't work, HOWEVER, eCommerce tracking through Google Analytics IS SUPPORTED by Squarespace (by adding the ID code within the web settings) so, the solution here is to use a combined approach by doing some of the tracking through GTM and some of it through the out of the box tracking with Squarespace and Google Analytics. 

Follow these rough steps (I'm assuming you've got experience with GTM and that you've already done some of the implementation):

- Add your analytics tracking code to Squarespace settings
- Enable eCommerce tracking and enhanced eCommerce settings within your Google Analytics view
- Go to your GTM container and PAUSE the tag that's sending "Page View" data into Google Analytics
- Voila! 🙂 

This way, Squarespace will take care of sending Page View and eCommerce data into your Google Analytics and you can do all of your behavioural tracking (button clicks, scrolling, Facebook Pixel, etc) within your GTM container. 

I hope that's clear enough and that it works for you. Let me know if it does! 🙂 

All the best,
Mariano

Hello @LaHacienda, 

This is a great work around! And it's still is relevant now in 2022. Which is amazing, considering how quickly things change. I'm working on an e-commerce site, and it's been really interesting to learn about GA, GTM, and SS. It sounds like you found a solution so all these products can work together seamlessly. If you're ever around these forums, it be great to chat. I'm hoping to attain my GA-GTM-SS-Seamlessness status soon 😁

it looks like you were having issues in Universal Analytics, but just in case you're having similar issues with GA4, I wanted to share the custom code and guide I created to track ecommerce on Squarespace sites using Google Tag Manager: https://www.tayloreddata.com/blog/how-to-track-ga4-ecommerce-events-on-your-squarespace-website

You can simply copy and paste the code into your own Google Tag Manager containers, just test and ensure it works for your website 🙂

Once I implemented this code, 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:

Let me know if you have any questions!

On 1/6/2024 at 8:49 PM, TayloredData said:

it looks like you were having issues in Universal Analytics, but just in case you're having similar issues with GA4, I wanted to share the custom code and guide I created to track ecommerce on Squarespace sites using Google Tag Manager: https://www.tayloreddata.com/blog/how-to-track-ga4-ecommerce-events-on-your-squarespace-website

You can simply copy and paste the code into your own Google Tag Manager containers, just test and ensure it works for your website 🙂

Once I implemented this code, 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:

 

 

Let me know if you have any questions!

Thank you so much for this info Taylor. It is THE most helpful resource I've come across to date. I do have a question though - I keep getting this message and I'm not sure what to do to resolve it. Any help would be appreciated.

Unknown variable “DLV - item_variant_color” found in a tag. Edit the tag and remove the reference to the unknown variable.

39 minutes ago, kate_frances_designs said:

Thank you so much for this info Taylor. It is THE most helpful resource I've come across to date. I do have a question though - I keep getting this message and I'm not sure what to do to resolve it. Any help would be appreciated.

Unknown variable “DLV - item_variant_color” found in a tag. Edit the tag and remove the reference to the unknown variable.

You're welcome and I'm glad you find it helpful! You need to go into your GA4 ecommerce tag and remove 

 "item_variant_color" as a parameter since you aren't using it in your code. Once you delete that parameter and save your tag, you shouldn't see that error again. I've highlighted what you need to remove in my screenshot below:

@TayloredData

I would like to track the users input for the forms in the footer of my whole website instead. I am having troubles doing it with JS and GTM. Couldnt get it to work. Below is my current code, would you be able to check it out and shed some light since you have made it work with your other code? I am just beginner with JS, learning still and used GPT to help me form the below. Thank you so much in advance.
 

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.querySelector('form[data-form-id="XXX"]');
        if (form) {
            form.addEventListener('submit', function(event) {
                // Prevent default form submission behavior
                event.preventDefault();

                // Initialize dataLayer if not already initialized
                window.dataLayer = window.dataLayer || [];
                
                // Capture form data
                var email = form.querySelector('input[name="email"]').value;
                var firstName = form.querySelector('input[name="fname"]').value;
                var lastName = form.querySelector('input[name="lname"]').value;

                // Log the values to the console for debugging
                console.log('Email:', email);
                console.log('First Name:', firstName);
                console.log('Last Name:', lastName);

                // Push form data to dataLayer
                window.dataLayer.push({
                    'event': 'form_submit',
                    'form_data': {
                        'email': email,
                        'first_name': firstName,
                        'last_name': lastName
                    }
                });

                // Optionally, submit the form programmatically after pushing data
                form.submit();
            });
        } else {
            console.error('Form with data-form-id "XXX" not found');
        }
    });
</script>

Cheers

On 7/31/2024 at 10:07 AM, Dilon said:

@TayloredData

I would like to track the users input for the forms in the footer of my whole website instead. I am having troubles doing it with JS and GTM. Couldnt get it to work. Below is my current code, would you be able to check it out and shed some light since you have made it work with your other code? I am just beginner with JS, learning still and used GPT to help me form the below. Thank you so much in advance.
 

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.querySelector('form[data-form-id="XXX"]');
        if (form) {
            form.addEventListener('submit', function(event) {
                // Prevent default form submission behavior
                event.preventDefault();

                // Initialize dataLayer if not already initialized
                window.dataLayer = window.dataLayer || [];
                
                // Capture form data
                var email = form.querySelector('input[name="email"]').value;
                var firstName = form.querySelector('input[name="fname"]').value;
                var lastName = form.querySelector('input[name="lname"]').value;

                // Log the values to the console for debugging
                console.log('Email:', email);
                console.log('First Name:', firstName);
                console.log('Last Name:', lastName);

                // Push form data to dataLayer
                window.dataLayer.push({
                    'event': 'form_submit',
                    'form_data': {
                        'email': email,
                        'first_name': firstName,
                        'last_name': lastName
                    }
                });

                // Optionally, submit the form programmatically after pushing data
                form.submit();
            });
        } else {
            console.error('Form with data-form-id "XXX" not found');
        }
    });
</script>

Cheers

Hi @Dilon what's your website URL? I'll take a look.