Overwrite css style with GTM before page loads - google-tag-manager

I have a section of my website that has a map inside a div that has an id with "display:none;" for mobile users. I would like to use Google Tag Manager and display that div with the map but I noticed that using a trigger by pageview is kinda slow when loading. The page loads and the div eventually displays the map but it shows broken since the js already loaded.
Is there a faster way to trigger a custom html tag with GTM other than pageview? Thank you

You cannot do anything in GTM before page load, since GTM itself needs to be downloaded and executed first (and due to async loading you cannot exactly tell when a tag is being executed). So no, there is now way.

Related

Adding GTM on iframe for mobile webpage

My website pages are loaded in an iframe when the page is viewed on mobile.
I am trying to add GTM to the iframe but when I inspect it in developer mode, it shows that the iframe src is https://xxxyyyzzz.xxx/aabbccdd, which is the page itself. GTM is already installed on this page (and all pages) - Looking over the internet, people are saying that I should add a new GTM container snippet for the child frame specifically. But I have 2 issues:
I cannot seem to find where the child frame is located
The page loading in the iframe contains already my GTM script and no script snippets
The events are firing on desktop but not on mobile so I'm missing something but not sure what!
I'd love to have some help on this <3

Tag assistant shows duplicate GTM tags

I have a small website where I used Barba.js to create smooth transition between pages. So it won't load a new page completely fresh, but rather load the content in background using AJAX and add it to the existing document.
So to fire Google analytics page view event, I use History change trigger in GTM. And it seems to be working fine. in GA it is recording the page views correctly. But in Google Tag Assistant, it keeps increasing the count of GTM tag on every page load. And I have checked it is not adding GTM tag on page loads. It only adds a main content container to the document which doesn't contain GTM tag.
Here is the TAG Assistant screenshot after a 3rd page load :
The Google analytics page view event is fired 3 times which is correct, but the GTM is also recorded 3 times.
This is a common behavior of Google Tag Assistant with single page website. The plugin is unable to detect single-page transitions correctly, so it will report the GTM container loading for each new URL when in fact the container has only loaded once.
To understand if it is not actually loaded multiple times, try to open the Network requests of your browser's developer tools and look for requests for gtm.js, If you only see one per page loaded there are no problems.

Adding Custom Popups using google tag manager

When a user lands on a page, I want to show a custom HTML popup. I have Google Tag Manager integrated with the website.
Can this HTML Popup be shown using Google Tag Manager? (script and code to be inserted using Google Tag Manager)
Is it frowned upon / not advised to use google tag manager for
anything apart from tracking?
1.) Yes - GTM is pure Javascript, and inserts Javascript into the page code, so anything you can do you can do via GTM. There are some minor caveats (e.g. a size restriction on custom HTML tags), but doing a popup should work just fine.
2.) There are certain use cases that are discouraged - Google recommends against (or at least used to) making visible changes to the page markup via GTM. The problems with that are that GTM is loaded asynchronously, so you would not know at which point the changes show up and you might get "flickering" pages, and a possible performance impact when you force the page to re-render.
Nothing of this applies to popups, so you should be fine (although using popups these days might have its own problems, but these are not related to GTM).
Personally I would recommend against implementing popups via GTM if the popup is an integral part of your page; splitting up an application between page code and GTM code will sooner or later confuse a developer. But if this is just advertising or a call to action or something similar then (IMO) using GTM is not a problem at all.

Why would Google Tag Manager not fire a tag set to fire on "All pages"?

I'm having a real tricky problem with Google Tag Manager on my site.
On certain paths under my domain, GTM will load (Tag Assistant shows the right container loading, and the GTM console pops up when Debug mode is enabled) but not fire any tags, even tags set to fire on all pages. This is using the default regex for the All Pages rule, ".*" I know this since the Debug console shows all the tags in the container as "Not fired".
On the root of my domain, GTM works just fine and the container loads while tags fire as they should.
I even opened the Chrome console and got the current location with "window.location.href" - it returned the path, minus the hostname, of the page I was on as expected.
What possible situation would cause GTM to load properly on a page, but not fire All Pages tags?
If the GTM container is loading properly but the tags aren't firing, that's because the tags that you want to fire have prerequisites that need to be completed before firing. By prerequisites, I mean that some action has to happen before a user reaches the page you want the tag to fire on for it to fire.
For example, If you are trying to fire a Google Adwords conversion code on a thank-you page. That conversion code won't fire unless someone actually came to your site after clicking on an Adwords ad. If a person came organically, then that tag shouldn't fire, otherwise all your conversion reporting would be over counted.
Hope this helps!
I also have this problem which i found an answer to. After creating your tags and linking the
macros properly, preview in debug mode, it should FIRE. But take note that it wont count on Adword Conversion account.
I think you add a rule dat says gtm.formSubmit it worked for me.
Try it out.

How to use Google Analytics Tag Manager to track off site links

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.

Resources