Menu
I have a link to my webpage where I want the user to be tracked using Google Analytics and Google Tag Manager before I redirect the user to an external page.
I want to make sure GA and GTM are done before I do the redirect. What's the best approach?
A simple approach is using a setTimeout. But is 1000ms too long or too short? Would prefer if it was possible to do redirect when tracking is actually finished?. Is GTM and GA tracking done before document ready? If not can this be forced?
<html lang="sv">
<head>
<title></title>
<meta charset="utf-8"/>
<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<!-- ANALYTICS CODE -->
</head>
<body>
<!-- TAG MANAGER CODE -->
<script language="javascript">
$(function() {
setTimeout(function() {
window.location.replace("http://externalwebsite.com");
},1000);
});
</script>
</body>
</html>
In the GTM bucket I have Twitter and a Facebook remarketing tag.
UPDATED SOLUTION
I've updated my solution. Since I'm mostly interested in making sure GA absolutely fires before redirect this will work better.
<html lang="sv">
<head>
<title></title>
<meta charset="utf-8"/>
<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<script language="javascript">
var redirect = function(waitFor) {
return function(signal) {
waitFor[signal] = 1;
for (var s in waitFor) if (waitFor[s] == 0) return;
_redirect();
}
}({timeout:0,ga:0});
var redirected = false;
var _redirect = function () {
if (!redirected) {
redirected = true;
window.location.replace("http://@Model");
}
};
(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-47608023-1', 'tessin.se');
ga('require', 'displayfeatures');
ga('send', 'pageview', {
'hitCallback': function () {
redirect("ga");
}
});
</script>
</head>
<body>
@Html.Include("google-tagmanager-redirect.html")
<script language="javascript">
$(function () {
setTimeout(function () { redirect("timeout"); }, 1000);
setTimeout(function () { _redirect(); }, 3000);
});
</script>
</body>
</html>
576
The easiest way is probably to do the redirection from within GTM.
Create a custom HTML tag with the redirection code. Then use tag sequencing to trigger the redirection tag, that way you make sure GA is triggered before the redirect.
177
One possible solution is to set the 'transport' flag, either directly in your GA code or by setting the field in GTM.
More info about that can be found here: https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#transport. Note that GTM v2 still allows for the 'useBeacon' flag, but it is deprecated and if you code directly in GA, then you should use 'transport' instead.
For example, if directly coding in this flag:
ga('send', 'event', 'click', 'download-me', {transport: 'beacon'});
or in GTM:
This flag ensures that the hit is sent before the page navigates away.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
