How to track multiple iframes with GTM? - google-tag-manager

I have a .NET framework application. There are many pages in this web application.
for example:
=======================================
About us |
To-Do List |
user List | catch me if you can
dessert shop | o~(‾▿‾)~o
cloth shop |
galleries |
=======================================
But it's not SPA, if I click "To-Do List",
it will load an iframe in the right.
And if I click "user List", it will load another iframe.
So when I embed Google Tag Manager code on the home page, It will only track my menu, it won't track other iframes' activities.
Should I create as many google tag manager account as my iframe has?

You could create more GTM instances in iframes, but it will make implementation much more complex.
Generally, in cases like these we just send window messages from iframes to the parent window, where they are translated to datalayer events by a listener (that can be deployed by GTM on pageload), for which GTM would listen and fire.
Don't forget to include click context in window messages. And then the context will have to be translated to datalayer variables pushed within the same object as the click event.
If you can, try to not deploy extra code like listeners through GTM if you can do that through front-end codebase. GTM has max size, so the less code it contains, the better.

Related

Tracking purchase after user returns from external payment

I have a hybrid app where the store is built on Webview the rest is native mobile. Users access the store via the menu button.
Since the store is web, I set up dataLayer variables where I have user information such as nickname, id, etc and also an ecommerce object where the items in the store are shown. I have also added dataLayer events such as view_item, process_purchase and purchase_completed.
I have integrated GA4 and GTM and I pass all dataLayer variables as event parameters so I can have organized.
The main problem is that, when users pay their order via card, they are taken outside the website to the payment provider solution, and then once the payment is finished, they return to the payment confirmation page where I set up the "purchase_completed" dataLayer event. This appears to break the tracking of the funnel, so sometimes purchase_completed event does not fire, or sometimes it fires but empty (no data on datalayer).
Is there a way I can fix this issue?
To me, your problem sounds rather shop related, than GTM related.
If your DataLayer.push event is malfunctioning (either empty or not firing at all), you need to your code.
GTM does not care for a funnel, if the dataLayer event fires and both trigger as well as tag are setup corretly, the tag is executed.

Google Optimize is implemented using GTM but is being triggered multiples times

We have an issue. GO is being fired every time I go to a new page. The website was built in SPA/react
Datalayer
They use a datalayer virtualpath that activates every time user go to a new page.
GTM
This DL was used as a custom event trigger to fire the Google analytics universal tag
Google optimize is associated to the Google analytics tag so every time a user to to a new page then go to a new page, the updatevirtualpath trigger is activated and the GO tag is fired.
Have anyone implemented Google optimize in GTM for react/ single page application websites where they use custom event as trigger ? When I use all pages trigger it works fine but when i use custom events it gets triggers every time user visit new pages..
Anyone know what can we do?

Creating GTM trigger/Linkedin Pixel tag for Drift chat click

I need to add a LinkedIn pixel to GTM to track Drift chat widget being clicked.
I have already added the LinkedIn pixel to a GTM tag, I know I did that correct. I created a GTM trigger that is set with the GTM tag and I'm having problems with the GTM tag not triggering. I have tried:
Trigger Configuration -> Trigger Type -> Click - All Elements
This trigger fires on -> Some Clicks -> Fire this trigger when an Event occurs and all of these conditions are true -> Click Classes -> equals -> [some class names I see when inspecting element]
The widget is placed inside an iframe. Should I assume any attempts to capture clicks from elements in the iframe will fail? When I "Preview" in GTM, view our site with the Tag Manager window open and then click the Drift chatbot widget - the GTM tag I created doesn't fire.
You won't get events from the iframe by default.
the iframe is a separate, complete HTML page. If this is a third party widget, then it sounds like a safe bet that your GTM code is not embedded into that page, so you can catch events via the native GTM functions.
as a third widget this runs most probably not on the same domain as your page. Cross-Domain communications with iframes is not something that happens by default (that's a security feature). If you can place Javascript into your widget, then you can communicate with your main page via window.postMessage (but then if you can place code you might be able to embed your GTM instance).
If Drift has something like tech support I would suggest to contact them - this is such a common issue that it's quite probable that they will have a solution ft it.

Execute Google Analytics Functions in addition to Google Tag Manager

When using the Google Tag Manager, is it possible to track some things the old way in addition to using the GTM?
For example, I use GTM in order to fire a page view.
However, I want to fire another page view, when a user clicks a button, also known as a virtual page view.
The button in question doesn't have an ID and I don't trust the othet agency, which handles these buttons to consistently keep the same IDs for these elements. So I would rather have them be responsible for these types of page views.
The code for the virtual page view would look something like that:
ga('send', {
hitType: 'pageview',
page: 'button2'
});
Since the tracker is already initialized by GTM, I would only have this code outside GTM.
Would this work if all other google analytics related things run over gtm and where should I put this code in this case? Somewhere after the GTM code on the page I'd imagine?
Google Tag Manager (GTM) by default uses a random name for each tracker, generated for each Universal Analytics tag. There is a possibility to use fixed name for trackers, which is highly discouraged. This means, that you might have difficulties to identify the proper tracker to use, when sending your additional pageview data.
There are however other methods to send virtual pageviews using GTM, where you can benefit from your existing Analytics settings, defined in Google Tag Manager. (Preferably by using Google Analyitcs Settings variable.)
As far as I understand, you have control over the code, to run some JavaScript on the relevant click event.
So instead of directly invoking the ga object, you can send the desired data to GTM, with a call like this:
dataLayer.push({
event : 'virtualPageView',
virtualPagePath : 'button2'
});
Obviously, there are a couple of things you need to set up in GTM, which will be able to act on this event, and send the pageview to Google Analytics.
Create a variable that points to virtualPagePath dataLayer variable, so the newly pushed value could be reused
Create a custom event trigger, that can be used with one or more tags. The event name should match your given event name, virtualPageView in my example.
You need an Universal Analytics tag, which will send the pageview. This tag should be fired by your new custom event trigger, and should have an extra setting compared to your regular pageview tag. Namely, page variable within the Fields to set block should point to the newly created dataLayer variable, that contains your virtual page path.
This way, Google Tag Manager will take care of creating the tracker for you, sending the hit to Google Analytics, and using the virtual page path variable provided by you, instead of the URL in the browser address bar.

Google Tag Manager and Single Page apps

I'm trying to integrate Google Tag Manager with my Ember app. I'm having a hard time understanding how to notify GTM that the page changed, and send a page view event.
I've read a lot of things online, mostly working around creating a new variable for a "virtual page" or something, but obviously this is far from ideal.
I'd like to be able to just use dataLayer.push to notify the page actually changed. Is there an easy way out I didn't find or is it really a pain to track with GTM on SPA?
This was asked quite a while ago. With the current feature set of GTM, you can easily set up SPA page tracking without much trouble.
First, go to Triggers and create a new trigger. Select History Change as the trigger type. This will create a trigger that fires every time the location history changes.
Then create a new Tag of Universal Analytics type and set it up as per the screenshot below.
[
As for the trigger, set the previously defined History Change trigger, and you're done. Every time a navigation occurs in your SPA, a page view event with the proper page path will be triggered.
EDIT: as trognaders pointed out in a comment, this does not track the initial page view. To remedy, simply add an additional trigger for your tag that fires on the Page View event (All Pages). See screenshot below.
You definitely need to push events into the dataLayer which you can then trigger a GA page view tag in GTM. So to push an event into the DL:
dataLayer.push({'event':'virtualPageView'});
Then setup a trigger called 'vpv' which fires on a custom event called 'virtualPageView'. Add that trigger to a GA tag.
The best thing to do is also send through the details of the virtual page when you send the event. This way you can set up variables that pull these dataLayer property values into the page view call. So you might do this:
dataLayer.push({
'event':'virtualPageView',
'page':{
'title':'contact us',
'url':'/contact'
}
});
So you'd setup a variable called 'DL- page title' (for example) which is a dataLayer value of 'page.title' and another variable called 'DL - page url' which is a dataLayer value of 'page.url'.
You then setup a new Universal Analytics tag which has all your usual pageview settings but with 2 'Fields to Set' (under More Settings). Set 'title' to {{DL-page title}} and 'page' to {{DL - page url}}
Finally set the trigger to 'vpv' and you'll find everytime you push the event + data into the datalayer you'll get a pageView fired off with your virtual page's title and virtual url.

Resources