I have wordpress plugin which outputs Piwik tracking js on client site:
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.com//";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript';
g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="http://piwik.com/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
The issue is that some of clients already use their own piwik tracking js, and it ends up with two piwik tracking JS outputted on their site.
Then there is conflict, because two tracking JS are writing to the same JS object "_paq"
So it would be great if there is some sollution to this like noConflict() for jQuery.
So would need the way to tell to "piwik.js" which I am including to not read from "_paq" and to read from some my custom object. So far, as I can see I would need to modify piwik.js for that.
I saw that piwik has option for multiple tracking : Multiple Piwik trackers
But I don't have control of another tracking code, I have only control of tracking JS outputed from my plugin.
So any, help would be great for this.
The only way I've been able to workaround this problem has been changing the name (choose a weird one) of the _paq variable in piwik.js and loading piwik.js synchronously.
No more collisions after that
Related
My SPA was re-loading GTAG every time I changed pages. Every post online was saying I have to be causing GTAG to load again in my code. So, I put together a small rough sample to re-create the issue. What am I doing that is causing the multiple loads? I only notice it because the Google Tag Assistant extension in Chrome points it out "Multiple installations of Global site tag (gtag.js) detected". Everything seems to be getting tracked fine.
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID', {'send_page_view': true});
</script>
<title>Single Page</title>
<script>
function change_page_function(page_nm)
{
var page = {'page':page_nm};
history.pushState(page, page_nm, '/'+page_nm);
gtag('event', 'page_view', {'page_title' : page_nm, 'page_path' : "/"+page_nm});
//gtag('config', 'GA_MEASUREMENT_ID', {'page_path': page_nm});
}
</script>
</head>
<body>
<a onclick="change_page_function('One');return false;" href="javascript:void(0);">Page 1</a>
<a onclick="change_page_function('Two');return false;" href="javascript:void(0);">Page 2</a>
</body>
</html>
In my real SPA if I remove the history.pushState it does not load multiple gtag.js tags and it behaves and tracks fine. Minus the pretty urls of course. I also tried reverting back to Universal analytics and had the same issue. If I add GTM to this example it gets duplicated too.
The issue is Google Tag Assistant when used with Single Page Applications.
At least in my case. I would say make sure you aren't loading gtag.js or js twice by looking through the Network tab in the developer console.
https://www.analyticsmania.com/post/multiple-installations-of-google-tag-manager-detected/
i would to use fastest asynchronous google analytics snippet, but i'm not a good programmer and so i don't know what is the best:
A)
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='//www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference#async-snippet-minified
B)
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);
})();
</script>
About these codes i would like to know if is a problem to put the code inside not <script> but inside <script type="text/javascript"> and if is a problem to put not before </head> (like suggested for "normal" snippet)
I hope you can help me and sorry for my english :) Thanks a lot!
The would guess the first one. It uses async and doesn't depend on DOM modification while loading the page.
For HTML5, it does not matter if you use <script> or <script type="text/javascript">.
As for where to put in your code, normally javascript should be at the bottom of the page after all of your css/html has loaded. Javascript is loaded synchronously, so each file load will stop the rest of the page from loading until that specific file is fully loaded. The async tag is not fully supported by all browsers, so I would not rely on that. Instead, you should use an asynchronous loader (like requirejs or LAB.js).
As for where you should put the google analytics script, in my experience it doesn't matter too much. It sounds like you're prematurely optimizing -- https://stackoverflow.com/a/385529/5780021. Per google's instructions, I believe it's supposed to go in the header in order to improve their statistics around page load speeds.
I am trying to implement the Google AdWords Conversion Tracking on a "Thank you" page after form submission. I am using the Google Tag Assistant in Chrome to test my tags.
Here is my code. Of course the values for the conversion_label and conversion_id are changed to the values given by Google.
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 123456789;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "AAAAAAAAAAAAAAAAAAA";
var google_remarketing_only = false;
var google_conversion_value = 0;
/* ]]> */
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display: inline">
<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/123456789/?label=AAAAAAAAAAAAAAAAAAA&guid=ON&script=0"/>
</div>
</noscript>
However, I get this error when checking the tag in Google Tag Assistant: Missing <noscript> tag.
The <noscript> tag is there, and present when I go into the source code. Yet I am still getting this error. I tried putting that <noscript> tag in many places, without any luck.
The manual doesn't give any further information on this error.
Also, does this affect the tracking conversion ?
Any help appreciated. Thanks
The noscript bit is only required for browsers which do not have javascript enabled (this is a very small number of users these days) - if the browser has javascript enabled it will execute the javascript as normal.
Sometimes the tag assistant gets confused though (particularly if there are DOM or script errors elsewhere on the page it is checking) - that snippet you pasted looks ok to me, and a test in jsbin.com suggests everything is fine.
I've upgraded the tracking script for Google Analytics to the Asynchronous version. The only issue I have is being able to debug the calls. I was able to track the older version in Firebug using the approach outlined on this site, but now cannot view the gaq.push calls. Is there way to view this in Firebug or another tool?
This is my sample test page I'm trying to track:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Google Analytics Event Tracking</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-13250000-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
Lorem ipsum dolor sit amet....<br />
<script type="text/javascript">
_gaq.push(['_trackEvent', 'Videos', 'Play', 'Gone With the Wind']);
</script>
</body>
</html>
I'm trying to confirm that "_gaq.push" is actually working.
I just ran into the same issue, and so I did a google search and ended up on this stack overflow question.. I too thought that this would just show up as a xhr request in firebug as that would be the simple way to track an event. Turns out they are using a 1x1 pixel gif to do the tracking! If you look in the Net > All tab in Firebug you will see a GET request made looking similar to this:
https://ssl.google-analytics.com/__utm.gif?utmwv=5.2.4&utms=28&utmn=1818843630&utmhn=dev-marketplace.asos.com&utmt=event&utme=5(my-home*sub-nav-click*blog-posts)&utmcs=UTF-8&utmsr=1920x1080&utmvp=1920x618&utmsc=24-bit&utmul=en-gb&utmje=0&utmfl=11.1%20r102&utmdt=Build%20%23%20Developer%20Live%20Feed%20ASOS%20Marketplace&utmhid=1950484512&utmr=-&utmp=%2Flivefeed%2Fblogposts&utmac=UA-23521416-1&utmcc=__utma%3D159014575.706813547.1328542287.1328542287.1328604985.2%3B%2B__utmz%3D159014575.1328542287.1.1.utmcsr%3D(direct)%7Cutmccn%3D(direct)%7Cutmcmd%3D(none)%3B&utmu=6AAAAAAAAAAAAAAAQ~
These are the params sent in the request
utmac UA-23521416-1
utmcc __utma=159014575.706813547.1328542287.1328542287.1328604985.2;+__utmz=159014575.1328542287.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none);
utmcs UTF-8
utmdt Build # Developer Live Feed ASOS Marketplace
utme 5(my-home*sub-nav-click*blog-posts)
utmfl 11.1 r102
utmhid 1950484512
utmhn dev-marketplace.asos.com
utmje 0
utmn 1818843630
utmp /livefeed/blogposts
utmr -
utms 28
utmsc 24-bit
utmsr 1920x1080
utmt event
utmu 6AAAAAAAAAAAAAAAQ~
utmul en-gb
utmvp 1920x618
utmwv 5.2.4
The TamperData plugin for Firefox is very handy. It lets you see all HTTP traffic, with filtering etc. It also has a facility that lets you modify headers before the browser starts the HTTP transaction, which seems pretty awesome but I've never used it.
I do this by looking at the Resources tab in Chrome Developer Tools:
http://drktd.com/45VJ (notice the yellow 'XHR' -- that means XMLHttpRequest, which is the kind of call you're likely looking for)
If you need an in-depth view of each request into/out of your system, you should really install Charles Proxy. It is the best of breed for this kind of stuff.
If you do not see the requests happening in FireBug, then they are not happening. Google Analytics is not somehow sidestepping the browser's ability to track what HTTP requests it is making, your code is simply not making them.
can someone to some resources for google analytics.i.e,where it can be used what all it can track..Also what does the following code does
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js'"));
<script>
var pageTracker = _gat._getTracker("UA-XXXXXXXXX");
pageTracker._initData();
pageTracker._setDomainName(".mydomain.com");
pageTracker._trackPageview();
</script>
The first script builds a URL where to download the script from (either from an SSL site if your original site uses HTTPS or from a not secure site if your original site does not use HTTPS). Then it includes a link to embed qa.js from Google.
The second script does the actual tracking (i.e. collects some info/parameters and submits this raw data to Google Analytics)
In regards how it works and what it can track - start with these 2 links:
http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55539
http://analytics.blogspot.com/search/label/Beginner%20Topics