Google Ads Conversion Tracking

Solved

Google Ads Conversion Tracking

Saba13
Shopify Partner
23 2 5

Hi,

 

I've created a conversion action on Google Ads:

Saba13_0-1718020982105.png

 

And according to the instruction, I have to add the code to the <head></head>.

 

Now if I add the 'Add to Cart' tracking code to theme.liquid, it triggers as soon as someone visits the website. It doesn't wait for the user to add something to cart. Which, I think, will not give the correct reports.

 

Where can I add these tracking codes such that they only trigger when the event happens? Or is it fine to add it to the theme.liquid?

Accepted Solution (1)
Sam_Mahmud
Shopify Partner
295 9 16

This is an accepted solution.

Hello Saba 13,

Thanks for your query.

I have audited your website thoroughly. I can see you don't have any GA4 schema datalayer to track the add to cart button for Gads tracking. 

To track the add to cart event push the event in the datalayer 

create a tag in the Google tag Manager to track the particular event.

for datalayer example :

add to cart  event in the datalayer.png

 

 

Theme dependent datalayer event  add to cart.png

 

GTM tag example for GAds add to cart event :

 

Gads -add to cart event tag.png

 

Feel free to ask any questions you may have.

Thanks

Your COFFEE TIP! Can Create something incredible!
Require Assistance with website design or enhanced conversion tracking Via Google Tag Manager GTM ?
sam.analyst4@gmail.com! or WhatsApp!
Solved? accept it as solution with like

View solution in original post

Replies 9 (9)

Huptech-Web
Shopify Partner
1047 208 225

@Saba13 
Can you share the website URL or preview link so I can check it?

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Saba13
Shopify Partner
23 2 5
Huptech-Web
Shopify Partner
1047 208 225

Hi @Saba13 
Add your tracking data layer code like this👇

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
	$('.button-add-to-cart').on('click',function(){
	    // add your tracking datalayer code here
	});
});
</script>
If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Saba13
Shopify Partner
23 2 5

Okay I added the code to the above snippet, but the event is still triggering as soon as I land on the website. It doesn't wait for me to add something to cart.

 

Should I add the event snippet to the above script code you sent as well?

 

I'm testing this in the tag assistant and as soon as the homepage loads, it says the tag has been detected. I'm not sure if this is the correct way to test?

Huptech-Web
Shopify Partner
1047 208 225

Hi @Saba13 

Can you share me the add to cart tracking script you are using so that I can have a better idea and also can share you the complete code

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Saba13
Shopify Partner
23 2 5

This is the full code with the snippet you provided:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
$('.button-add-to-cart').on('click',function(){
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-11391563095"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-11391563095');
</script>
});
});
</script>
<!-- Event snippet for Add to cart conversion page -->
<script>
gtag('event', 'conversion', {'send_to': 'AW-11391563095/F5niCKbe2LgZENfq9bcq'});
</script>

I'm not sure if I should add the event snippet your code as well. I added this code just above the </head> in my theme.liquid

Huptech-Web
Shopify Partner
1047 208 225

Hi @Saba13 
This is not the add-to-cart tracking code.

This is the initialization of the google data layer code.

This doesn't need any event to fire.

It will fire on the page load
Undo the changes and keep the code as it is and check the below code

The actual add to cart data layer tracking code will be something like this 👇

 

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
	$('.button-add-to-cart').on('click',function(){
                        dataLayer.push({ 'ecommerce': null });dataLayer.push({
                        'event': 'add_to_cart',
                        'ecommerce': {
                                value: {{ product.price | times: 0.01 }},
                                'items': [{
                                'item_id': '{{ product.id }}',
                                'item_name': '{{ product.title | remove: "'" | remove: '"' }}',
                                'item_brand': '{{ product.vendor | remove: "'" | remove: '"' }}',
                                'item_category': '{{ product.collections[0].title | remove: "'" | remove: '"' }}',
                                'item_variant': '{{ product.selected_or_first_available_variant }}',
                                'currency': '{{ shop.currency }}',
                                'price': '{{ product.price  | times: 0.01}}'
                                }]
                            }
                        });
	});
});
</script>

 

Replace below code 

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
$('.button-add-to-cart').on('click',function(){
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-11391563095"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-11391563095');
</script>
});
});
</script>

TO this

<script async src="https://www.googletagmanager.com/gtag/js?id=AW-11391563095"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-11391563095');
</script>
If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Saba13
Shopify Partner
23 2 5

I got the above code from Google Ads

Saba13_0-1718026764299.png

Is this the general Google Tag code?

 

If so, does this mean I don't actually need to add this code and my conversion action should work regardless?

 

I'm sorry I'm a bit confused now. 

Sam_Mahmud
Shopify Partner
295 9 16

This is an accepted solution.

Hello Saba 13,

Thanks for your query.

I have audited your website thoroughly. I can see you don't have any GA4 schema datalayer to track the add to cart button for Gads tracking. 

To track the add to cart event push the event in the datalayer 

create a tag in the Google tag Manager to track the particular event.

for datalayer example :

add to cart  event in the datalayer.png

 

 

Theme dependent datalayer event  add to cart.png

 

GTM tag example for GAds add to cart event :

 

Gads -add to cart event tag.png

 

Feel free to ask any questions you may have.

Thanks

Your COFFEE TIP! Can Create something incredible!
Require Assistance with website design or enhanced conversion tracking Via Google Tag Manager GTM ?
sam.analyst4@gmail.com! or WhatsApp!
Solved? accept it as solution with like