CODEWITHSUNDEEP
javascripthtmltagsgoogle-tag-manager
gododgers
gododgers

Reputation: 31

How to track a button click using a custom <img> tag in Google Tag Manager

I received a custom tag by a marketing firm to place on a Wordpress site for tracking clicks on certain buttons. I am using the Elementor page builder on the site and have given each button a unique button ID. I am new to Google Tag manager by the way. From my understanding, I would need to use the custom html tag option so that I can use the marketing firm's custom tag with their tracking code. When creating the custom html tag in GTM, I'm presented with html box and am stuck as to how to get the tracking code to fire. I've set up the trigger to correspond with the button ID but that isn't enough. Here's what I've tried:

I've tried just entering (see below) in the HTML field: (the example is for the newsletter button). I thought maybe there is some "magic" that tag manager uses to build the event listener but I couldn't get anything to fire.

'''<noscript><img src="https://tags.srv............." width="1" height="1"/></noscript>'''

Next I tried to inject something like this to no avail (see my note as I was guessing here):

    <script>
    document.addEventListener("DOMContentLoaded", function(event) { 
            jQuery('#newsletter_send_button a').click(function(){ 
            //tracking code here
            //for example Facebook Pixel:
                 fbq('trackCustom','newsletter_send_button');  <<<HERE IS WHERE I'M UNSURE 
                                                                  OF WHAT TO PUT IN.>>>
    </scipt>
    <noscript>
            <img src="https://tags.srv...................." 
            width="1"
     height="1"/>
    </noscript>

Google tag manager is installed on the site. I see my universal tag firing so I know I'm good. Now how do I add this custom tracker to individual buttons on the site? Maybe I'm headed in the wrong direction but I think I have to use the Custom HTML option in Google Tag Manager because the tracker info is being sent to the marketing agency and not the business's individual GTM account. I'm just at a loss. I "think" the tracker is a Facebook pixel because of the tag (just guessing here). Any ideas?

Upvotes: 2

Views: 1932

Answers (1)

gododgers
gododgers

Reputation: 31

In case anyone else runs across this thread, I as able to get it to work. If a 3rd party agency (marketing) sends you a img pixel, use the Custom Image tag in Google Tag Manager and input only the URL (no img tag or height/width) in the Image URL area and leave Cachebusting on. Sounds simple after you figure. Also, if you are using Elementor forms and are looking to fire the tag based on a successful form submission, one word of recommendation is to create a separate redirect page and set the trigger to be the page url of the redirect page. You can use the div.elementor-message-success css tag as the element trigger but that works for all successful form submissions and getting GTM to read the form ID after the submit button has been clicked didn't work for me hence why I just used the redirect url as the trigger.

Upvotes: 1

Related Questions