Analytics
4.8K members online now
4.8K members online now
Dive into multiple domain (Cross/Sub) tracking, implementing Ecommerce and Enhanced Ecommerce, setting up Event tracking, and Universal Analytics code.
 
Guide Me
star_border
Reply

Outside link event tracking code for squarespace header

[ Edited ]
Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

I'm not good at this, so I would appreciate any help you can offer! 

I have set up a squarespace site and its primary purpose is to refer to either of two outside links through buttons on the site. I would like to track how often people click on those outside link buttons. Currently, the header code that I have injected reads: 

<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-100XXXXX-X', 'auto');
ga('send', 'pageview');

</script>
function handleOutboundLinkClicks(event) {
ga('send', 'event', {
eventCategory: 'Outbound Link',
eventAction: 'click',
eventLabel: event.target.href,
transport: 'beacon'
});
}

 

Can anyone see why this might not work? Any idea why Google Tag Assistant thinks that some amount of code is outside the <head>? 

If not, this is the code that I found that might be another option. Is it likely to work if I put it into the header?  

 

<script type="text/javascript">
function _gaLt(event) {

/* If GA is blocked or not loaded, or not main|middle|touch click then don't track */
if (!ga.hasOwnProperty("loaded") || ga.loaded != true || (event.which != 1 && event.which != 2)) {
return;
}

var el = event.srcElement || event.target;

/* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */
while (el && (typeof el.tagName == 'undefined' || el.tagName.toLowerCase() != 'a' || !el.href)) {
el = el.parentNode;
}

/* if a link with valid href has been clicked */
if (el && el.href) {

var link = el.href;

/* Only if it is an external link */
if (link.indexOf(location.host) == -1 && !link.match(/^javascript\:/i)) {

/* Is actual target set and not _(self|parent|top)? */
var target = (el.target && !el.target.match(/^_(self|parent|top)$/i)) ? el.target : false;

/* Assume a target if Ctrl|shift|meta-click */
if (event.ctrlKey || event.shiftKey || event.metaKey || event.which == 2) {
target = "_blank";
}

var hbrun = false; // tracker has not yet run

/* HitCallback to open link in same window after tracker */
var hitBack = function() {
/* run once only */
if (hbrun) return;
hbrun = true;
window.location.href = link;
};

if (target) { /* If target opens a new window then just track */
ga(
"send", "event", "Outgoing Links", link,
document.location.pathname + document.location.search
);
} else { /* Prevent standard click, track then open */
event.preventDefault ? event.preventDefault() : event.returnValue = !1;
/* send event with callback */
ga(
"send", "event", "Outgoing Links", link,
document.location.pathname + document.location.search, {
"hitCallback": hitBack
}
);

/* Run hitCallback again if GA takes longer than 1 second */
setTimeout(hitBack, 1000);
}
}
}
}

var _w = window;
/* Use "click" if touchscreen device, else "mousedown" */
var _gaLtEvt = ("ontouchstart" in _w) ? "click" : "mousedown";
/* Attach the event to all clicks in the document after page has loaded */
_w.addEventListener ? _w.addEventListener("load", function() {document.body.addEventListener(_gaLtEvt, _gaLt, !1)}, !1)
: _w.attachEvent && _w.attachEvent("onload", function() {document.body.attachEvent("on" + _gaLtEvt, _gaLt)});
</script>

1 Expert replyverified_user
Marked as Best Answer.
Solution
Accepted by topic author Kaitlin C
June

Outside link event tracking code for squarespace header

Rising Star
# 2
Rising Star

Hey Kaitlin,

 

I would recommend one of two options:

1.  Use GTM which has built in event listeners

 

https://www.simoahava.com/gtm-tips/track-outbound-links-in-gtm-v2/

 

2.  Use Auto track to handle your event.

 

https://github.com/googleanalytics/autotrack/#overview

 

Best,

 

Theo Bennett

 

 

Analytics Evangelist at MoreVisibility | Contact Me
Connect on LinkedIn