Click tracking with Google Tag Manager - javascript

I'm new to GTM, coming from GA.
In GA, if I wanted to track clicks to a given element, I would place that code in an onclick event.
How would one accomplish this with a GTM tag?
Suppose I have:
<div id="click_me" >
** hot new content **
</div>
I would like to create a tag to track every time this element is clicked.
I have already set up the GTM container on my site, along with GA, and connected the two with a "Universal Analytics" tag, all of which seems to be correctly configured like so..
Where do I go from here?

You should refer to this resource on how to create an event tag to track your clicks: https://support.google.com/analytics/answer/6164470?hl=en
Your trigger would be based on the ID that is clicked and could look something like this:

Related

I want to track some affiliate link clicks in my blog posts but analytics is not tracking every affiliate link click

Yesterday I got 200+ link clicks on the affiliate dashboard, it only shows around 30 clicks on analytics. I did the setup via tag manager for link click tracking and want to track affiliate link clicks as goals in analytics correctly.
The affiliate platform shows a lot more clicks and analytics is tracking only a few. I have three affiliate links in every post on the blog that I want to be tracked when someone clicks on them.
For e.g: https://www.spiritual-galaxy.com/angel-number-192/ , there are 3 affiliate links here, attaching the screenshots.
Screenshot - Affiliate Link 1
Screenshot - Affiliate Link 2
Screenshot - Affiliate Link 3
Attaching the screenshot for GTM settings.
Screenshot GTM
Attaching the screenshot for tracking event (affiliate link click) as a goal on analytics.
Screenshot - Track Event
GTMs click events can be challenging, and you get no data until it hits GA.
I would use the outbound clicks listener and manage rules inside of ListenLayer for what defines an affiliate link. It will then give you reporting on your click events directly so you will be able to see that compared to GTM.
Step 1: Create an account, get your script and place it on your website via GTM. Then turn on the Outbound Clicks Listener and it's Activity Features on the feature screen.
Step 2: Publish your changes and preview your website in GTM. Click on your affiliate links and you will see an outboundClick event pushed into the data layer for each click. . You can see here there are a ton of pieces of info that are really useful. Each row is a unique element of that click event and you can use them to customize your affiliate click data layer activity for better tracking.
Step 3: Let's identify your affiliate links via ListenLayer with some rules. The issue is that the Listener is going to capture all Outbound Clicks, and I'm assuming you might have some that are NOT affiliate links. You can also use the following process to categorize your affiliate links with a lookup table so you can actually segment which ones are receiving clicks!
Turn on the Custom Data Layer Feature under the Outbound Clicks Features screen. Then create a new data layer variable under Global Custom Data Layer Variables I'm creating one called affiliateClick. I am going to write some rules to push "yes" into this variable in my data layer whenever an affiliate link is clicked!
Step 3: Inside my Outbound Clicks Listener navigation, I will select Custom Values. Then create a Lookup Rule. We're going to use some values in our automatic data layer to determine if a click is an affiliate click. You can see in step 3 I would recommend just using a variable and selecting from this list.
For example, maybe you use hostname because you know all the website domains you will link to that are affiliate. Or you could add a URL parameter to all affiliate links and target that in the click event. I'm going to select Hostname. On the next step, select to define a value for the variable we created in step 2. Then click save and manage values.
Step 4: A table will be generate and you can insert rows. Each row is a rule, read top to bottom and it stops when a match is found. Here are my rules, your affiliate domain is at the top and I have some fake examples of others. You can see how you could also name or categorize these with this rule. At the bottom I have a catch all "no".
Save and publish your changes.
Step 5: Now your outbound clicks that are affiliate links will have this clear "Yes" value in the data layer
So instead of trying to use GTM to target some crazy xpath value, you can simply target event = outboundClick and clickCustomValues.affiliateClick= yes for a trigger that will universally capture your affiliate links. Now, if you wanted to you could get super fancy and categorize your affiliate links and pass them into GTM with a variable and pass that to GA with every event - all dynamically.
I'm sortof assuming you know GTM pretty well but basically you just need to be able to create Custom Event triggers based on the event name in the data layer outboundClick and capture data layer variables. If you need help with just reading and using data layer activity in GTM, there are probably a ton of details in other answers on stackoverflow.

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?
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.

Custom Click tracking for Vuejs

Here is a problem I am facing. I want to build a podcast recommendation engine and wanted some behavior click information. Here is the app https://podflix.app
What is the source page or the podcast ID
And which podcast or recommendation people clicked for a given source podcast.
Also what tracking library to use for custom json tracking? I am currently using google analytics but can't send custom json in events data.
Is there a way to get this information tracked automatically?
I recommend you use Google Tag Manager for this. Look into auto event variables in GTM.
Then look at click triggers and event tracking in GTM. Tie these together you should be able to form a solution. Give it a try and let me know if you run into issues.
Example,
For podcast id you would create a link click trigger and register the GA event to track the "href" of the link in the event label.

How can I know when a new div is loading into my webapp

I am developing a webpage with different divs which are located in different files.
I have my index.html with several links. Every link is placing a different div from a file into the body of the main file.
OnLoad() event happens only when the page first loads.
My problem is that one div has a form with input fields. When I click on save, I open a confirmation page which is on another div.
I need to put the values inside the fields before the user is clicking to save the details but I don't have any event that triggers in order to perform the initialization of the elements.
To simplify my problem:
I have index.html with a link.
When clicking on the link it opens a div from a file named form_div.html.
form_div.html has a form with input fields and a continue button.
When clicking on the continue button it opens another div from a file named confirm_div.html.
The values from form_div.html need to be set into the labels in confirm_div.html
At this step I am not aware about any event that happens in order for me to set the DOM elements with the values from the URL.
Note: I am NOT looking for something with JQuery.
If what you're looking for is something like a kind of "rolling" on-load event, that will fire every time the DOM is injected with new content, I regret to tell you it doesn't exist. If you're already listening to the onclick event of the links (in order to retrieve and inject the new div) then why can't you just do what you need to do there as well?

Refreshing facebook like button after swapping url with javascript is not working

I have a problem where im using javascript to change the href of the facebook like button to change the url to a new link based on new ajax video content the user can load on the webpage. I want to make it so they can like each video based on the current one they are watching. The href is swapping out beautifully and i declared a FB.XFBML.parse(document.getElementById("fbyoutubelike")); to refresh the like button. However nothing happens and I'm not sure what to do anymore. Does anyone have a clue as to how this can be accomplished?
FB.XFBML.parse probably won’t re-render the tag if it sees the iframe is already there …
Instead of just manipulating the href attribute content, remove the existing like button tag (<fb:like> or <div class="fb-like">) from the DOM, insert a new one – and then call FB.XFBML.parse.

Categories