Tracking anchor links - Google Analytics - wordpress

I have a wordpress website and I'm tracking it with google analytics. I need to track the anchors and
have been digging stackoverflow to get some answers. After trying several, I still can't get it to work. So, what's wrong with this?
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47361493-1', 'festasdelisboa.com', {'allowAnchor': true});
ga('require', 'linkid', 'linkid.js');
ga('send', 'pageview');
$(function(){
$("a[href*='http']").each(function() {
$(this).click(function (ev) {
var pageView = '/outgoing/' + $(this).attr('href');
_gat._getTrackerByName()._trackEvent('Outbound Links', pageView);
var _href = $(this).attr('href');
setTimeout(function() {
location.href = _href;
}, 100);
ev.preventDefault();
return false;
});
});
$("a[href*='mailto']").each(function() {
$(this).click(function (ev) {
var pageView = '/mailto/' + $(this).attr('href').substring(7);
_gat._getTrackerByName()._trackEvent('Mailto', pageView);
});
});
$("a[href*='#']").each(function() {
$(this).click(function (ev) {
var pageView = '/anchor/' + $(this).attr('href').substring(1);
_gat._getTrackerByName()._trackEvent('Anchors', pageView);
});
});
});
</script>

Was struggling with this for quite a while now. Use the below snippet as part of your Universal Analytics code - found it worked almost immediately for me! My GA reports are showing visits on hashtag anchors in the Behaviour >> Site Content >> Content Drilldown section
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12345678-1', 'auto');
ga('send', 'pageview');
// Anchor Tracking snippet start
jQuery(document).ready(function () { var
hashtag = /#\S+/ jQuery('.menu li a').click(function(){ var match =
jQuery(this).attr('href').match(hashtag); ga('send', 'pageview', '/' +
match[0]); }) });
// Anchor Tracking snippet end
</script>
Found this to be the only workable and easily understandable solution - when it comes to Google's Universal Analytics

Related

google analytics traffic increase drastically when using setTimeout() function for GTM, GA, GTAG & FB scripts

I am using this code to load the tracking scripts 3000 ms after page load to optimize page speed.
I have checked using the chrome extension tag assistance legacy by google plugin and no major issues are recorded other than Same web property ID is tracked twice on google analytics
<body onload="loadtracking()">
<script>
function loadtracking(){
loadgtm();
loadfbpixel();
loadga();
loadgtag();
}
</script>
<script>
function loadgtm() {
setTimeout(function(){
(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-xxxxx');
// window.dataLayer = window.dataLayer || [];
}, 3000);
return true;
}
</script>
<script>
function loadfbpixel(){
setTimeout(function(){
!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.defer=true;
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', 'xxxxx');
fbq('init', 'xxxxx');
fbq('track', 'PageView');
fbq('track', 'CompleteRegistration', {
content_name: 'Sign up',
content_category: 'xxxxxx'
});
}, 3000);
}
</script>
<script>
function loadga(){
setTimeout(function(){
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'xxxxx', 'auto');
ga('send', 'pageview');
ga('send', 'event', 'xxxxx', 'xxxxx', 'xxxxx');
}, 3000);
}
</script>
<script>
function loadgtag(){
setTimeout(function(){
scriptgtag = document.createElement('script');
scriptgtag.src = "https://www.googletagmanager.com/gtag/js?id=xxxxx";
scriptgtag.async = true;
document.body.append(scriptgtag)
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'xxxxx');
gtag('event', 'conversion', {'send_to': 'xxxx'});
}, 3000);
return true;
}
</script>
But the traffic on GA increased drastically once I implemented this code by x 15
increase in traffic
I cant seem to figure out the issue.
You're loading Google Analytics to the page more than once (potentially even more if you're also loading it through Google Tag Manager) and it's firing a pageview for each of those loads. Let's step through each of your <script> blocks.
<script>
function loadgtm() {
setTimeout(function(){
(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-xxxxx');
// window.dataLayer = window.dataLayer || [];
}, 3000);
return true;
}
</script>
This starts by loading GTM to the page. In order that its own triggers properly work, it's typically advised that this run in the <head> tags of your page. It loads asynchronously and non-blocking so running it on your page would hardly impact perceived page speed.
If you have a GA tag installed within GTM, this accounts for at least one pageview.
<script>
function loadfbpixel(){
setTimeout(function(){
!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.defer=true;
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', 'xxxxx');
fbq('init', 'xxxxx');
fbq('track', 'PageView');
fbq('track', 'CompleteRegistration', {
content_name: 'Sign up',
content_category: 'xxxxxx'
});
}, 3000);
}
</script>
This simply loads the Facebook pixel, so we'll skip over it, except to say that I would instead advise loading this within GTM triggered at pageview.
<script>
function loadga(){
setTimeout(function(){
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'xxxxx', 'auto');
ga('send', 'pageview');
ga('send', 'event', 'xxxxx', 'xxxxx', 'xxxxx');
}, 3000);
}
</script>
That brings us to the first of your explicit Google Analytics installs. Assuming you're not running something like this from within GTM, this sends a pageview and your event after your 3000ms timeout. Again, from an interest of minimizing page speed impact, you should use the built-in Google Analytics tag within GTM and augment it with the event you wish you fire (though I advise making the switch to GA4 before the collection cut-off next year).
<script>
function loadgtag(){
setTimeout(function(){
scriptgtag = document.createElement('script');
scriptgtag.src = "https://www.googletagmanager.com/gtag/js?id=xxxxx";
scriptgtag.async = true;
document.body.append(scriptgtag)
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'xxxxx');
gtag('event', 'conversion', {'send_to': 'xxxx'});
}, 3000);
return true;
}
</script>
This brings us to the Gtag loader, which is really just a means of loading a small GTM instance to your page that bundles the Google Analytics tag. This would account for your second pageview in GA. Since you have GTM installed to the page, you shouldn't be using this loader at all and should instead opt for the built-in GA tag within GTM.
Best case, you're double-counting pageviews. Worst case, you're counting 2x + however many GA pageview tags you're firing off within GTM.
My advice:
Install the Google Tag Manager function without the timeout as high within the <head> tags as you can as provided by their installation instructions.
Install your Facebook tag as an HTML script (drop your timeout function) and trigger to execute at Page View.
Install the built-in "Google Analytics: Universal Analytics" tag, configure accordingly and trigger to run at Page View.
Install the built-in "Google Analytics: GA4 Configuration" tag, configure accordingly and trigger to run at Page View. This will be used by other GA4 tags for the base configuration, but also fires a pageview event without need for a second event-specific tag for the same.

google-analytics: Conversions not showing on Transactions

I have installed Google tag manager and the following tag is firing and being count accordingly for my E-commerce conversion (tag called 'Google Analytics eCommerce'):
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-76425812-2', 'auto');
ga('require', 'ecommerce', 'ecommerce.js');
ga('ecommerce:addTransaction', {
'id': inspectionID
});
ga('ecommerce:addItem', {
'id': inspectionID,
'name': 'Inspection',
'quantity': 1
});
ga('ecommerce:send');
</script>
Nevertheless I am trying to create a tag and to avoid firing multiple tags for the same conversion. For that, I am creating a universal tag to save the utm_source and I am storing it on a Custom Javascript Variable.
TAG:
<script type="text/javascript">
var url = window.location.href;
var keyToFind = 'utm_source';
if(url.indexOf(keyToFind + '=') > -1)
{
var valueFound = url.substr(url.indexOf(keyToFind + '=') + keyToFind.length + 1).split('&')[0];
sessionStorage.setItem(keyToFind, valueFound);
}
</script>
Java Script Variable:
function()
{
return sessionStorage.getItem('utm_source');
}
When I use this variable to trigger any other tag (this is not triggering the Google Analytics eCommerce tag at all), GA stops considering the conversions.
Anyone may have an idea about what can be happening in the case?
Thanks,
Helton

Google Analytics Opt-out

To be OK with the nonsense cookie law of the Grosse European Komission, I've built this little script to opt-out the GA tracking code. The result is a popup asking once in the session for OK vs CANCEL GA. What do you think of it?
(function() {
var message = "GOOGLE ANALYTICS COOKIE\nCookie or not cookie, that is the question\n\nI opt for Google Analytics pageview anonymous tracking.\n\nJe consens au suivi d'audience anonyme Google Analytics.";
if (!sessionStorage['key_name']) {
if (confirm(message) == true) {
sessionStorage.setItem('key_name', 'gaOK');
}
else {
sessionStorage.setItem('key_name', 'gaOut');
}
}
if (sessionStorage['key_name'] == 'gaOK') {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-N', 'auto');
ga('send', 'pageview');
}
})();

Polymer - Track app usage with Google Analytics

I'm trying to use Google Analytics (web) with my polymer app (updating the tracker object in routing.html as per this GA SPA doc). I used the Polymer Starter Kit as a starting point. I'm not seeing any pageviews though, apart from / - what's the suggested way of tracking app usage?
routing.html
page('/topstories', function () {
app.route = 'topstories';
window.ga('set', 'page', '/topstories');
});
page('/about', function () {
app.route = 'about';
window.ga('set', 'page', '/about');
});
index.html
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxxx-1', 'auto');
ga('send', 'pageview');
</script>
In addition to setting the page value on the tracker, you also have to send the pageview hit to Google Analytics. In your route callback functions you'll need to add the line:
ga('send', 'pageview');
You could also write a function that does all this for you, so you don't have to repeat the set and send calls every time.
function updatePage(path) {
return function() {
app.route = path.slice(1);
ga('set', 'page', path);
ga('send', 'pageview');
}
}
The your page route declarations would look like this:
page('/topstories', updatePage('/topstories'));
page('/about', updatePage('/about'));
My solution takes advantage of the middleware-ish page.js handler:
// Routes
page('*', scrollToTop, closeDrawer, function(ctx, next) {
ga('set', 'page', ctx.path); // simply add
ga('send', 'pageview'); // these rows
next();
});
But this also fires as the / route is initialised, so to not double count visits, remove the final ga('send', 'pageview'); from your <script> block.

Migrating _setDomainName from Classic to Universal Google Analytics

I'm trying to figure out how to correctly migrate from Google's Classic Analytics to Universal Analytics, specifically regarding the _setDomainName property of Classic Analytics.
The site I'm doing this for has several sub-domains, and the current format of the Classic tracking code is what I've been using for years on all sub-domains of this site, as well as in the main (www) URL:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'TRACKING ID']);
_gaq.push(['_setDomainName', 'sitename.com']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
The Universal tracking code has a default format of:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'TRACKING ID', 'auto');
ga('send', 'pageview');
</script>
I was reading somewhere that to handle the migration of the _setDomainName property I should replace the the following line in the Universal code:
ga('create', 'TRACKING ID', 'auto');
with
ga('create', 'TRACKING ID', 'auto', {'legacyCookieDomain': 'sitename.com'});
However, I came across something else that said to replace:
ga('create', 'TRACKING ID', 'auto');
with
ga('create', 'TRACKING ID', {
cookieDomain: 'sitename.com',
legacyCookieDomain: 'sitename.com'
});
I've seen other people saying that the Universal code doesn't require any code modifications to handle this.
Does anyone know for sure what I should do here? Thanks in advance for any help!
This
ga('create', 'TRACKING ID', 'auto', {'legacyCookieDomain': 'sitename.com'});
should work best for you if your intention is to continue tracking pre-migration visitors. It uses the "auto" cookie domain so that you can track across other subdomains, like whatever.sitename.com, and the "legacyCookieDomain" parameter which supports cookies that come from ga.js or urchin.js.
[Source: https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#legacyCookieDomain]
Setting the cookieDomain paremeter with a value of "sitename.com" is the same thing as setting the whole parameter to "auto".

Resources