I know that it's not a good idea to use hidden iframes (zero height, display:none, etc) for tracking users because if they are not rendered their contents usually are not called too.
So why Google TagManager uses an iframe hidden in all the possible ways (display:none, visibility:hidden, width:0, height:0)?
If you are talking about tracking code for GTM:
<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.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
Which has an iframe:
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
This iframe is for users who don't have Javascript enabled. If client's browser has disabled JS, browser is not executing JS inside script tags, he is just rendering html inside noscript tag.
Browser will just render hidden iframe and will try to load this url.
Related
I'm not sure which tracking codes are needed to get both Google Analytics (GA) and Google Tag Manager (GTM) to work. I'm currently using the following script with GA ->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxx-x');
</script>
Now that I'm setting up GTM, it is asking me to add the following tracking codes as well ->
<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.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?
id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxx');</script>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxx"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Do I need all these snippets? It would be important to be able to both set up event tracking and not lose any previous GA data.
Technically you are migrating from gtag.js to GTM (GTM is a tag manager, and while it can be used to deploy GA by itself it tracks nothing).
If you want to integrate Google Analytics via GTM then the second snippet in your post is the replacement for the first, not an addition. You need the second snippet, then you configure GTM to deploy Google Analytics to your page. For most use cases you do not even need the noscript tag (unless you specifically configure tags that run in noscript mode).
For you debounce-event you can use a timeout to push an event to the datalayer and then use it to trigger a Google Analytics Event. You can do this either somewhere in your page code, or in a custom HTML tag that is triggered on a Pageview (or DOM ready) event.
setTimeout(dataLayer.push({'event':'deBounce'}),20000);
Then you create a trigger of the "Custom Event" type an in the field "event name" you enter "debounce" (without the quotes). You then use that trigger to fire a Google Analytics tag that is set to event tracking in GTM (you notice already that this is not really simpler than gtag.js, but it allows you to control also non-Google tags so it's probably worth the effort).
The "Event" key is special in the dataLayer object - Google overwrites the native push-method in the datalayer array to listen for object keys called "event". Whenever it hits an "event" key it updates all internal variable from the dataLayer (this adds all newly pushed values) and then allows to fire tag.
Yes you would need both the script to set up GTM. 1st code preferably in the head section and 2nd code in the body section of your website.The code enables tag manger to fire tags by inserting gtm.js in the page.
Once your GTM is set up ,for tracking you can create universal Analytics tag to track your events.Check out the url below for tracking events using GTM.
https://www.gravitatedesign.com/blog/google-tag-manager-analytics-event-tracking-2018/
I have problems setting up conversion tracking for a lead with the new Facebook pixel and GTM.
This is what I did:
Facebook Base Code integrated with GTM on every page (see code below)
Custom Code for the Conversion Tracking (Lead) integrated with GTM when a particular form submit happens (see code below)
When a conversion happens the following error shows up on the Facebook Pixel Helper : “Facebook Pixel activated 2 times…Facebook Pixel pixel activated multiple times on this web page, which can cause errors in your event tracking”
FACEBOOK Base Code:
<!-- Facebook Pixel Code -->
<script>
!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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', '11111...');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=11111...&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->`
CONVERSION TRACKING Code for the Lead:
<script>fbq('track', 'Lead');</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=11111...&ev=Lead&noscript=1"/>
</noscript>
No idea where the problem is actually. Can you help?
I also tried to remove the:
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=11111...&ev=Lead&noscript=1"/>
</noscript>`
but in this case the conversion wouldn’t be triggered at all.
Keep two Custom HTML in total:
The first Custom HTML tag should contain the Facebook pixel base code as per your first example. Set it to fire on every page and change the setting to fire "Once per page".
The second Custom HTML tag should contain your Lead event as per below:
<script>
fbq('track', 'Lead');
</script>
Set this to fire "Once per Event" if you are firing it on an event such as a lead form submission, or "Once per Page" if you fire this tag on a page load such as a thank-you-page.
The trick is the to ensure that you change the sequencing setting for the second tag. On the lead event tag, set up the Facebook Base Tag to fire before the lead event tag does - this is likely currently the problem.
The lead event does not work if the facebook base pixel is not already loaded - currently they may be firing in the wrong order.
Your 'noscript' snippets should be left out as they will not be fired anyways inside a Custom HTML tag. The 'noscript' snippets are actually there to help if javascript is broken or disabled in the browser, so if you want them to work within GTM you need to create a Custom Image tag inside GTM instead and add the noscript image URL there such as below:
Make sure that you don't have both options enabled at the same time as it will cause double-counting of conversions in the Facebook reporting. Instead set up a GTM criteria that checks whether javascript is enabled or not and fire the image tag only when it is not and you are golden.
These tricks should be credited to the amazing Jehoshua Choen of Analytics Ninja, so please read up on his whole post on the topic if you want further clarification.
I don't have any experience with this case. But i am also installed FB Pixel via GTM. But i did not have any chance to install further conversion tracking down to lower step in sale funnel.
However, as i understand, In this case there is diffent between installing directly in website code and via GTM because:
Installing directly: Facebook will regconize the user's action as one event with one parametter about conversion action type.
Installing via GTM: Facebook will regconize the user's action as two separate d events. Because GTM send two tags separately in two events. Therefore, the option of tag sequencing is there to command GTM send 2 tags as one event.
Remember that: Event that is the concept that both GG and FB tracking system accept. And Conversion Tag in GTM is a technicaly concept used to transfer in fo to Google without involving with source code. So, do not misunderstand that a tag is a event.
GTM affer interpreting the tag settings or code (if custom JS or HTML Tag) will packed with the original to send to browser. And Pixel Helper read & analyze the site from browser.
That 's why wrong setting could cause GTM send 2 tags as 2 events snippet code to browser and then Pixel Helper read them as 2 individual events in 2 individual duplicated pixels.
Hey all thx for your time!!.
I want to add a login page at my website. So, i am using iframe and centered it to show the username,password and connect button. But, i want my page to load the iframe page when user click the connect button inside the iframe.
First, i want them to add the username and password info. And click load, then the page reloads but keeps their info (i hope).
Here is the code
<iframe id="iframe" scrolling="no"
src="http://sms.altasoft.gr/panel/index.asp?lang=el&disp_function=user_login&id=5E8A0F4B-063B-4A7A-81FE-99579AF44BAA">
<p>Your browser does not support iframes.</p>
</iframe>
If the page loaded into the iframe uses some cookies to keep the log in information, this should work:
<script type="text/javascript">
window.onload = function(){
var iFrame = document.getElementById("iframe");
iFrame.onload = function(){
window.location = iFrame.src;
};
}
</script>
If I understand correctly, you're using an iframe and want to have the main page reload when the form inside the iframe has been submitted. Is that correct? If so, add ' target="_top"' to the form inside the iframe, and it should reload the whole thing.
I have an iframe within div
<div>
<iframe pageB>
</div>
on button click in iframe, redirected to a different page A - I have a jquery to hide the div on page load of A - so this part of jquery is not working - normal alert window on this page load works - I saw $ undefined - included jquery exclusively on pageA but still undefined error has gone but jquery does not work - can any body shed some light on this? doesnt jquery work in this redirection scenario.
If the IFRAME is on a different domain than the DIV this will not work due to security restrictions.
Instead of an IFRAME you could try using jQuery.load() to put the content into your div, and then hide the DIV as a part of the callback to load(). This will only require jQuery to be loaded on your main page.
When you host Googles web search element on a page, a div is created which incorporates an iframe which points to a Google adsense ads page. However, if there are no ads for the specific query, Google somehow changes the class on YOUR domain to render the div (and iframe) invisible.
They are NOT using postMessage, as it also works in IE7. They are also not using the fragment identifier method, as no hash appears in the url. So how do they do it?
To check what I'm saying just put the following into a regular html page:
<!-- Google Custom Search Element -->
<div id="cse" style="width:100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
new google.search.CustomSearchControl().draw('cse');
}, true);
</script>
and then do a search for "cars" (or anything else that will definitely have ads) and then for "wzxv", which has no ads...
The script is included in your frame, so it can do to your page whatever it wants. Cross-domain restrictions only count for scripts in iframes referencing things in outer scripts from foreign domains. google.load('search', '1'); runs in your frame, owned by your domain, free of any restrictions.
The script fragment is executing in the DOM of your page, not in the ads IFrame. It creates the IFrame as a child element of the parent div in your HTML and sets its URL to load the ads, but since it's running as part of your page, it can also choose to hide the parent div instead.
Update: The script can easily run an Ajax query to the ad server and choose what to do based on the response. In fact, the script might be dumb enough to not even care about the response and just render it in the DOM and the ad server can just return another script that does the proper thing based on the result - hides the parent div or injects the ads iframe. Heck, the ad server can directly return the proper HTML to replace the whole parent div, if necessary. All the initial script needs to know and pass along with the Ajax query is the name of its parent div, which you pass to it as a parameter.
the answer is one word lenght: jsonp