I've pretty much spent all day configuring GTM (it takes forever) but I'm facing a situation which I don't know how to track:
Lets say there are many links, on many pages, they all have a url like this /xxx/yyy/zzz.
only zzz is changing. I have these links in different sections on the website.
When a user clicks a link I need to know what section and what page was this link DOM element was at. (or in GTM only target clicks for links in a specific section)
Example markup for homepage
<section class='A'>
<a href='/xxx/yyy/1'>link</a>
<a href='/xxx/yyy/2'>link</a>
<a href='/xxx/yyy/3'>link</a>
</section>
<section class='B'>
<a href='/xxx/yyy/1'>link</a>
<a href='/xxx/yyy/2'>link</a>
<a href='/xxx/yyy/3'>link</a>
</section>
I've read google's instructions carefully but they don't explain how to set up specific tracking, they only talk about general all-purpose tracking.
I don't want to use dataLayer.push() but I want the GTM system to handle everything for me, without changing the website code.
I would imagine GTM has some sort of event-delegated capabilities which could be used as rules to track links only on specific places, so more specific rules could be created.
Depending on the version of GTM you are using the terminology and steps might be different, but I'll outline how to handle this.
Set up an auto event macro named parentClass (or something simialr) to return the class of the parent element of the clicked element.
Set up a Link Click Listener to fire on all pages if you haven't already.
Set up a Google Analytics Event tag in GTM. Use the parentClass macro as the event label.
Set up a rule that fires when the GA Event tag when the URL contains the pattern you're looking for.
There are other ways to set this up and you may need to capture additional information, but this should get you going.
Related
I am working on a web application that is served as an iframe to several clients. I am interested in adding both Google Analytics 4 and Facebook/Meta Pixel analytics tags to the page (through Google Tag Manager if possible) so that the customer can receive the data, as customers have been asking for this.
I understand I can add this integration via GTM to the website by creating a GTM account, creating a container for the website, adding the provided GTM script and iframe to the head and body respectively, and adding GA4 and Pixel as tags to my GTM account. However, this will only provide myself with the page usage data. I could alternatively add a customer's GA4 and Pixel tags to the site, but then only that one customer would be receiving the data. I want to be able to dynamically send the GA4 and Pixel data to whichever customer is currently displaying the app to an end user.
I've seen there is a way to grant access to your GTM account or a specific container through GTM, but doing this would provide one customer with all the data associated with the web app, not just their implementation of it. This solution would work if only one customer was using the website, but not when it is served out to anyone who adds the iframe to their website.
The Pixel tag provided by Meta/Facebook to include in the head:
<!-- Meta Pixel Code -->
<script th:unless="${pixelID == ''}">
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', pixelID);
fbq('track', 'PageView');
</script>
<noscript th:unless="${pixelID}">
<img height="1" width="1" style="display:none"
th:src="${'https://www.facebook.com/tr?id=' + pixelID + '&ev=PageView&noscript=1'}"/>
</noscript>
<!-- End Meta Pixel Code -->
Is solving this problem as simple as replacing the Pixel ID pixelID (and Google analytics container ID in the case of GA4) with a stored customer ID value?
Please let me know if there is anything I can help to clarify about the situation or my problem
Thanks!
Edit -- For those looking for a solution to this, I have found a great blog post here detailing how to implement the event forwarding discussed in the top comment.
You typically don't go GTM. While implementing user GTMs is an option, it's not a good option. It's too much work on the vendor side, but it also breaks tracking logic for the client unnecessarily into multiple containers, making debugging and implementation a lot harder and less obvious. Having an iframed GTM has other issues too. Like potential double tracking of pageviews if you're not careful and so on.
The best support an iframed vendor can do for their parent window clients (and the industry standard for it) is pushing window messages to the parent. All kinds of messages, indicating all actions users are doing in the iframe, indicating all page changes if there are any, indicating conversions and flow abandonment if applicable.
Then, have it documented with examples of window listeners that can catch those events and retranslate them into proper dataLayer pushes. This would be very considerate.
If you want to go further, you could make a git repo with the container export that would have a tag to deploy the listener as well as variables triggers and test tags for pseudo-tracking all the possible iframe interactions.
I need to implement the GA tracking event for PDF file downloads, For that had searched a lot and found out many code where i can add some code to links and track them from GA's content section, But the problem is I do have a lot of PDF link on the page and don't want to edit every link and I want the code to be generic for future uploaded links also.
So what would be the best approach for this task, Any referral links would do or any code would be highly appreciated .
Thanks in advance.
You can explore the use of Google Tag Manager, where you can create a generic tag that will return to you information for each individual link. GTM uses things called "macros" which is like a template that returns useful information including the clicked element's ID, or pathname (which in your case for the PDF files, would all be different). So in this way, you would only need to call this macro each time a PDF file is clicked. No coding is involved using this standard approach through GTM. Here's a link to a descriptive explanation: http://porcelainduck.com/2014/03/track-pdf-downloads-google-tag-manager/. You can see that it uses the {{element URL}} macro that returns the PDF's unique URL. GTM not only applies to current links, but also all future links.
Based on the tags which you've used to mark your question with you're using C#, ASP.NET
If that's the case, can't you create a base page that on rendering replaces all the
I would recommend adding a click event with JQuery to all links or all links inside the download widget class. Inside the click handler I would then grab the link text and use that as part of the Google analytics event you fire.
I have been trying to get this to work for sometime and there seems to be very little information on how this works.
First, I would like to say that I tried the below method to get it working, so please read this before posting a solution.
What I tried:
I added the google analytics experiment code in a custom HTML block and had it fire only of the original page as stated by google. This doesn't work and seems to create a loop for users. A white page appears when users get to the experiment pages.
Does anyone know how to get this to work? Much appreciated
The Javascript versions of Google Content Experiments are not actually supported in GTM at the moment (they have do do either redirects or change the site on the fly and since it's hard to say in advance at which point during page load the tags fire, and it which order, this does not work very well - in the very best case the original page would load completely before the visitor is redirected to a variation).
The features page for GTM lists A/b testing tags as "coming soon" but does so since at least a year ago, so I wouldn't hold my breath.
However you can do variations serverside (you'd have to implement your own logic to display the proper variation to each users) and pass and experiment id and the variation number to GA via GTM. I do not think there is another (reliable) way to do this, at least not yet. If you need to do it with javascript you should add the experiment scripts to the page code instead of deploying them via tag managemement.
Having said that, there are descriptions for hacking around the GTM limitations using the Experiments Javascript API and some jQuery (here is one). When Google says that something is "not supported" it might just mean they didn't want to test all possible edge cases and err on the safe side. So you if you absolutely have to use GTM for Content Experiments you would have to test if something like this would work for you.
I hope that I understand your problem well. If yes, you can use Google Optimize instead of Google Experiment. The Google Optimize works with Google Tag Manager by default.
Here's what worked for me
For the pages in the Experiment, I implemented Google Analytics the "old fashioned way" with analytics.js instead of GTM.
I tested (with Realtime analytics) this and the Experiment page and the Google Tag Pages both report data.
I did post asking if there might be conflicts from ths.
It's possible to modify the Google Tag Manager (GTM) snippet to run synchronously by removing the j.async=true; line and placing it at the top of your page, immediately after the opening <head> element. Like so:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
You can also retain support for users without Javascript by inserting the <iframe> part of the code in the original location specified by GTM (after your opening <body> element).
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe</noscript>
It's then possible to insert the Google Analytics Experiments code as a Custom HTML tag in GTM. Just make sure you check the 'support document.write()' checkbox.
Just don't forget to update GTM-XXXX with your container ID.
I noticed that Google has released their Tag Manager application making it really easy to make changes to your tags and tracking options. How can I use this tool to track off site links?
Google Tag Manager (GTM) is not a tracking tool, so the short and unhelpful answer is that you can't. However you can deploy Google Analytics via GTM, which I guess is what you mean. I have to say, though, that tracking offsite links turned out a little less straightforward than I expected it to be.
Usually you track external links by virtual pageviews (or events). The usual way in GTM would be to push a variable to the data layer on the click event of the link and then fire a GA tag with a virtual pageview based on a rule based on that event. This failed completely for me when I tested it, presumably because the new page had loaded before the GA tag could fire. So I resorted to a not very elegant workaround:
First I created a standard Google Analytics Tag (tracking type pageview) to make sure the GA code was included in the site. Then I created a custom HMTL Tag with a bit of Javascript (this is assuming you use jQuery in your page):
<script>
$('a').click(function() {
var p = $(this).attr('href');
if (p.search(/.+YOUDOMAIN/) == -1){
_gaq.push(['_trackPageview', "external://" + p]); // mark links as external in the GA interface
}
});
</script>
For all links that do not contain YOURDOMAIN a click event with a pageview is attached to the link. To make sure the all the links are tagged with the click event you set a rule in the tag manager to make sure the script is executed only after the page has loaded you set event based rule in the tag manager where the event is equal to gtm.load (gtm's equivalent of jQuerys domReady).
This works (at least it did in my tests), but since it does not use GTMs intermediary dataLayer it looks rather like a hack to me. If anybody can suggest a proper solution I'd be grateful.
I have a web site that spits out links to third party sites. Now these third parties want MY site to track their clicks. How do I do this without ruining the SEO-friendly nature of a plain link?
Currently an ad link is just an anchor:
Come Visit Site A!
I can easily change the links to something like this:
http://mysite.com/clicktracker.aspx?redirect=adsiteA.com
But won't that kill any search engine benefits of linking to their site? If not, I'll happily do it this way... What are my other options? An onmousedown script that hijacks the click and does a postback then redirect?
Do your third party sites want you to report on all the bots and spiders that have crawled your site and followed the links, or just "real" people?
If it's the latter, you could do something along the lines that google use for their search results.
Basically, you render the link out normally, but add an OnMouseDown event to it, so that a spider that doesn't use a mouse follows the standard link, but a normal browser will fire the JS event first.
What you would end up with is something like this:
<a onmousedown="return trackMe(this)" href="http://example.com/">
And the trackMe method is then performing the redirect to the tracking page, which then issues a 302 redirect to the third party site.
You'd obviously want to check how this works for users navigating via the keyboard or similar (i.e. using Space or Return to follow the links).
If they're paid links, Google says they're not supposed to benefit your advertiser's PageRank. (In fact you could get penalized for trying to subvert this)
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=66736