Google Tag Manager - Pro Theme Integration 2022 Solution

Support
#1

Hello there,

I’m trying to integrate Google Tag Manager on my Website and I would like to do it without installing yet another Plugin - can you help me / guide me on how to do it correctly?

I have a Google Tag Manager tracking Code for both Header and Body.

I searched on your Forum trying to find a solution, but I see that most of the articles are from 2017. I am hoping that there’s an easier & better solution to do this.

Best Regards,
Kate

#2

Hello Kate,

Thanks for reaching out!

To install Google Tag Manager on your website, I suggest that you use the official google site kit plugin.

Please have a look at this documentation to learn more about how to set up Google Site Kit.

Hope that helps.

#3

I’m trying to integrate Google Tag Manager on my Website and I would like to do it WITHOUT INSTALLING yet another Plugin - can you help me / guide me on how to do it correctly?

Where do I need to paste the HEAD code and BODY?
Do I need to go appearance>theme editor>functions.php? and paste the code there on the Child-Theme

#4

Hello Kate,

In case you don’t want to use the extra plugin for the Google Tag manager then I would suggest you please have a look at this thread to learn more about how to add Google Tag manager through the active child theme functions.php.

Hope it helps
Thanks

#5

Hi Prakash,

What are your thoughts on this thread? Should I try the following method

#6

Hello Kate,

You can use this thread as well for your reference as well, it would work fine. Please note that the code provided in the above thread serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer or subscribe to One where customization questions are answered.

Thanks for understanding

#7

Hi there,

I have successfully added the Google Tag Manager code to my website. But I have another BIG problem with the Themeco builder.

When I add a product to my cart with the custom pro theme button that I have created, the google tag manager does NOT recognize the “Add to cart” event when clicked on it.

I have tested it on the Default WooCommerce Page with their Default Add to cart Button, and it works and GTM recognizes the “Add to cart” event when clicked without any problems.

How can I fix this button theme builder problem?

Kind Regards,
Kate

#8

Hello Kate,

Please check out this article first:

In your custom Pro Theme “Add To Cart” button, make sure that you have added the necessary class like single_add_to_cart_button so that the Google Tag Manager will recognize the event.

Screen Shot 2022-08-05 at 8.12.03 AM
Screen Shot 2022-08-05 at 8.12.03 AM716×1008 52.4 KB

This class “single_add_to_cart_button” is specific to WooCommerce. If your add to cart button has a different class then in your Google Tag Manager settings make sure that you have indicated the click events with your own class.

Kindly let us know how it goes.

#9

Hi @ruenel,

I have added the following class single_add_to_cart_button to my custom “Add to Cart” Button. I have added the class to the “FL Studio” version only and left “Ableton Live” Button to compare. Here’s what I mean: https://prnt.sc/xz9HWTYbDskl

#10

Following up on this,

I have found out that GTM event recognizes the Button as “x-anchor-content” instead of “single_add_to_cart_button”.

In the code of the button you can see it here:

How can I change the Button to be recognized - targeted as CLASS: “single_add_to_cart_button” ?
- The step above you told me, doesn’t work.

Here’s what my Google Tag Manager Event sees:

#11

Following up on this @ruenel @marc_a @christian @prakash_s

#12

Hey Kate,

The setting is not in Pro but in GTM. Please reach out to GTM support to learn how to capture the link <a> instead of child elements inside the link. This 3rd party article will also give you an idea.

This is not an issue with Pro. If you noticed, you mentioned the WooCommerce buttons work. That is because the WooCommerce buttons are simply buttons <button>. There’s no child elements inside the button so GTM has nothing to capture but the exact button.

That is not the case for the Button element as it is actually an anchor tag <a> with child elements. Your GTM setup captures the exact element clicked.

Cornerstone uses the child elements within the element for styling and content. Another alternative in case you don’t want to change your GTM setup is to create your own HTML button. This will require custom development though so we can’t cover that as part of theme support.

Hope that explains the situation.

#14

Hey Kate,

Withdrawing the posts means that the information given by my colleague was insightful on your end! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

#15

Hey Marc,

How can I add a string - event to the button?

I really need a solution for this, the article Chris sent didn’t help me since it is confusing… I have tried to follow the guide and set up as it says but It doesn’t work…

The only way that I managed to “Target” the button is to set up Trigger in GTM to look up for click text “Buy Now” but It doesn’t work properly

#16

Hi Kate,

What is the string event you trying to specify here? If you want to add any custom event to the button element, that requires custom development, and as my colleague says that it is beyond the scope of Theme Support. What I understand is that the custom HTML button is the only solution that was given by my colleague in his last post.

Thanks

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.