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.
Related
Question about migrating manually inserted Meta pixels/Events to GTM. Any feedback is much appreciated!
We manually installed the FB Pixel and manually created events b installing the code into our website a few months ago.
Now, we want to migrate all of these events, including the pixel loading code to GTM.
My question: If I delete the existing pixels loading/event creation code on the website and create the appropriate tags/trigger in GTM:
a) will those 'new GTM' events be pushed as new events to Meta
b) will the pixel have to re-learn?
c) will I lose the data flowing into my existing ads?
For example, if I delete the following code from the website and create the appropriate tag in GTM how will these events change?
<script>
fbq('track', 'Lead');
</script>
a) No, there is no magic whatsoever. Inspect how the network requests to Meta look right now, then reimplement them in GTM and in GTM preview on your lower env make sure the GTM-spawned network requests are exactly like they are on prod. As long as the requests are the same, the endpoint won't know the difference.
b) No, it won't know anything has changed. Exceeept... Note that some adblockers may block GTM, but allow facebook, so the volume of conversions may be slightly lower, but that shouldn't affect FB's learning.
c) You may lose some data, but not much since most of the adblockers block both, facebook and GTM. The data loss is likely to be low enough to be immeasurable and insignificant.
But again, during the development, test your network requests if you don't want surprises. The data should not change unless you make mistakes.
I find Google documentation around Google Tag Manager (GTM) terrible at helping me figure out which bits go where.
As I understand, GTM requires that you put a <script> snippet on your pages which is supposed to bring in other code snippets, as could be configured by a non-technical user.
I'm a technical user, though. Perhaps that's the problem! I also find it problematic that Google use the word "tag" to refer to either an HTML element tag, like <script>, or their own proprietary use of the word to mean calling a function ("triggering a tag") in another script, also unhelpfully referred to as a tag.
They also have "gtag" which is what - a helper? something that enables you to send general analytics events through the GTM API? The docs simply say:
The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform.
... but we could already send analytics? What does this add?
For example, I wish to send an e-commerce Purchase event.
I've found that to do this I needed to add a new snippet of code with two <script> tags to the header on the site (thought GTM meant I didn't need to do this?) that sources gtag.js, then I'm able to call the following at the appropriate place in my javascript:
gtag('event', 'purchase', { value: 1.23, transaction_id: 'test' });
Or without it (although this does not seem to work):
ga('require', 'ec');
ga('ec:addProduct', {name: 'test product', price: 1.23})
ga('ec:setAction', 'purchase', { id: 'test_id_1', revenue: 1.23 })
So my question is: when would you use gtag() over ga(), and why can't GTM install gtag?
When would you use gtag() over ga()?
Use gtag if you want to send data to supported Google products other than Google Analytics. As you pointed out, "The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform.", whereas ga only works for Google Analytics. But (see below), you might decide to never use gtag nor ga and always use GTM.
Why can't GTM install gtag?
It could (you could have a GTM tag inserting some gtag code) but it's beside the point as they are meant to be used as 2 different solutions:
gtag is a purely programmatic tracking tool for sending data and only works with 3 Google products (so far - Analytics, Ads, Marketing Platform - more maybe added in the future), it's made to provide basic out-of-the-box tracking with a simple copy/paste + small lines of code (if needed for customization).
GTM is a tag manager: it can work programmatically BUT requires a minimal configuration of the container via the GTM UI (a default container won't send data anywhere), and can send data to whatever products you want (just need to setup the corresponding tags in GTM), while having a bunch of other features
A few questions to help you choose:
Am I sending data to other tools than Google Analytics/Ads/Marketing platform?
Do I want to use some the extra features GTM offers (UI, version control, templates, debug, environments etc...)?
Is there some tracking that would be heavy to implement via pure custom JS (eg scroll tracking) which GTM can facilitate with its built-in listeners (eg scroll tracking)?
If YES to any of the above, then use GTM
I personally never use gtag, I always replace it with GTM because it's considerably more powerful than gtag.
What Google is doing is progressively replacing all their default snippets with gtag so they only have 1 unified API to maintain and it's an easy copy/paste for users (bear in mind most users aren't tech savy and just need to paste the snippets in into their CMS). Forcing people to use GTM would be too much of a friction as out-of-the-box GTM simply doesn't track anything and people would need to learn & configure GTM, too much work vs a simple copy/paste.
Note: The built-in events don't use category, label, and value. Take care to use the correct keys when sending these events.
I am working on a third party website that contains a web application embedded in an iframe on the home page. This iframe is hosted on the same same sub/domain.
Currently page views are being tracked with _trackPageview. Due to a requirement by marketing both pages use the same Google account Id.
Since the iFrame was implemented the marketing department has noticed that the bounce rate has dropped to almost nothing. I suspect that this is because Google is interpreting the pageView event on the iframe as the visitor hitting another page on the website.
Just for additional information, the domain of the _gaq object is being set to "none" for both the container page and iframe.
Does Google provide a mechanism by which you can trigger PageView in such a way that it isn't interpreted as subsequent pageview in this scenario? (I know that trackEvent has a noninteraction property to deal with this?)
Am I better off just disabling the PageView for the default iframe page?
Does Google provide a mechanism - apparently yes, but probably not for your use case.
The field documentation for Universal Analytics describes the non-interaction field thusly:
Specifies that a hit be considered non-interactive.
So in UA this does no seem limited to events but to apply to all hits (which would include pageviews). I want to point out that I have no tested it and that it seems counterintutive, so it might simply be that the documentation is incomplete/wrong here.
However as you are using "classical" Analytics this does not apply to you. Since upgrading the code is a good idea in any case you might want to push for an update to Universal Analytics (this piqued my curiosity so I will test this over the next few days and update this answer with the results - maybe you want to wait until then, or simply test it yourself).
It's possible, but not 100% clear to me that disabling the PageView event on the iframe will prevent your users from registering a page exit (the pageview may get recorded regardless). You can try removing that event and see if it works.
But a better way may be to implement a custom filter on a new View excluding traffic to that specific class of iframes. Make sure you keep your old View (or create a new one with further filters) to make sure you're capturing those iframe views, if you think that's necessary.
I am using Google Tag Manager on all my sites now to implement Google Analytics and future proof them for any other scripts.
I am putting GTM in my boilerplate.
Is there any reason this might not be good practice?
Any reason why a website (that needs GA) should avoid Google Tag Manager?
Most websites will require some sort of Javascript code added in the future for affiliate tracking, various analytics and having GTM installed will allow for easy installation of any such JS code easily.
Or, as Google puts it: "Why wait months for site code updates? Google Tag Manager lets you launch new tags any time with a few clicks, so you never miss a measurement or marketing opportunity."
Since GTM does not come with a service level agreement you could (very very tenuously) argue that GTM adds an additional point of failure. And if one wanted to be pedantic one could point out that not all ways of analytics tracking work with GTM (if you track serverside via the measurement protocol).
But real life argument, there is none (IMO).
There might be pages that do not greatly profit from GTM (or any other Tag Management) if all you do is to deploy a single analytics tag to track pageviews. But the second you need to track an event or pass data GTM is already worth it.
This is not meant to be merely opinion based, it's more that in 2,5 years of using GTM on large sites I have been unable to find any scenario where the tag management code has caused any technical problem or interfered with existing code. On the other hand I do not write click handlers or submit handlers anymore, I have a boilerplate template for a container tag in which I just have to replace values for a few macros before I import it to GTM and have tracking up and running, I can set data fields with much less trouble than via the code... so I think there is a real technical argument to make in favour of GTM, and none against it.
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.