I am currently using analytics.js (the newer version of GA) and I am trying to track all types of events from my website, including when a user clicks on an anchor tag pointing to an external URL.
I am currently using this setup:
(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-KEY-HERE', { 'alwaysSendReferrer': true, 'allowAnchor': true });
and I send the events when hitting a link like this:
$(document).on("click", ".anchor-class", function (event) {
label = //get data from anchor element here ...
ga('send', 'event', 'Link Clicked', 'Click Details', label);;
return;
}
});
and this does not send anything to GA (even though the event handler is calling the ga(send...) method).
How ever, if I use this exact technique for but with event.preventDefault(); at the beginning of the function, the event is sent and it appears in GA dashboard.
Is there some setting that I missed in order to make this work properly?
Use the hitCallback function:
$(document).on('click','a', function(event){
event.preventDefault();
var label = $(this).attr('href');
ga('send', 'event', 'Link Clicked', 'Click Details', label, {
'hitCallback': function(){
window.location.href = label;
}
});
});
As pointed out by Blexy, the correct way to do this is to use a hit callback. However, you also need to take into account that users may block Google Analytics using some privacy protection tool such as Ghostery, in which case the hit callback will never be executed. The following article explains how to implement this correctly:
http://veithen.github.io/2015/01/24/outbound-link-tracking.html
We currently had this issue and ported our analytics code off of the website and into GTM. Another issue is that we have hundreds of sites that cannot have the new code released to them to deprecate the on-page analytics, but we already had GTM on them.
We were able to find the jQuery events that were bound to the click event and write code in GTM that removes the jQuery event on those clicked buttons via the exact event handler. Then we were able to apply standard GTM click triggers and tags so we didn't get double eventing.
Assuming you can easily remove the code from the page the following should work great using GTM.
This will fire an event off to analytics when a user clicks a given element and it will make any navigation wait until the corresponding tags have finished firing first before letting the page navigate away.
GTM Implementation
This is the quick and standard way now with the newer GTM.
Pre-Setup
Variables
You will need access to the Click Element Built-In variable. You can enable this under Variables --> Configure --> Click Element.
Also enable the Page Path or Page URL Built-In variable. This is later used to help you determine which pages to run the trigger on.
It looks like you're trying to get some text off of the clicked element for the event. If so you should create a Custom JavaScript variable. This just gets the inner text of the element, but you could also get an attribute or whatever other data you're looking for at this step.
Name: Click Element - Inner Text
Variable Type: Custom JavaScript
Custom JavaScript: function() { return {{Click Element}}.innerText; }
Triggers
Create a new trigger
Trigger Type: Click - Just Links
Wait for Tags: Enable this, this is the magic you're looking for.
Max wait time: set this to what you feel is appropriate and if you can live with the possibility that you may loose some analytics for a better user experience. Imagine what the wait time may be for a 3G user on a mobile device. Is 5000ms enough, not enough, maybe 10000ms. The user probably understands their connection is bad.
Enable this trigger when all of these conditions are true:
NOTE: you should only run this on pages that you need to run it on. Google isn't very clear if there is a performance loss and their "Learn More" says nothing about it.
If you need this to run on all pages though, configure it like so:
Page Path matches RegEx .*
Otherwise you should write something like:
Page Path matches RegEx ^/path/my-page$ specific page
Page Path matches RegEx ^/path/my-page/.*
NOTE: I'm not sure if those regex are correct, I'm not sure if you'll get a path with a proceeding or appended forward slash / or if you need anchors - normally it's best to be explicit on anchors so you don't get any funny business.
This trigger fires on: Some Link Clicks
Fire this trigger when an Event occurs and all of these conditions are true. Choose one below that fits your needs and change it how you need it.
Click Element matches CSS selector a
or maybe something more specific?
Click Element matches CSS selector .container .calls-to-action a
maybe only on external links? Assuming all internal links are relevant pathing.
Click Element matches CSS selector a[href^="http"]
Tags
Create a new tag
Tag Type: Event
Category: Link Clicked
Action: Click Details
Label: {{Click Element - Inner Text}}
Google Analytics Settings: best to use these for reusability and consistency rather than manually setting them up.
Firing Triggers: The Link Clicking Trigger you created above.
Related
I'm having a problem with a href target _blank on my website.
I cannot determine why it is not opening the link in a new tab, in the section: LATEST PROJECTS > Boranito skat and others, in fact, is instead opening the link in the same tab... can someone explore my website and tell me what is happening and how to solve it? I think it does have to be something with the JS but I am not able to find the problem in the Javascript code since I am a javascript rookie and cannot understand properly what the javascript code here does...
from what I have understood due to previous google and StackOverflow research and behavior watching, it is because javascript is handling the event target _blank in a different way, in fact, javascript here is being used for website change( i mean every click you do on the menu, some divs appears, some divs disappears and it is being handled by 3 js classes), already examined the JS files, clicked right-click, used element inspector> elements> event listeners>click event to see which JS files are being triggered while clicking...
see here detailed image
as you can see, two javascript archives are executing while doing the click event:
1: `jquery.pagepiling.min.js. //// 2: animsition.js`
3: scripts.js
so apparently both javascript classes are handling the events: on click, but since I am a newbie in javascript I cannot understand how to handle this or even understand what the JS does to the website ( i am just tinkering with the given template to try to understand it and to customize it better, (and hence, make the target _blank work properly( as exposed before, while clicking the link, it opens the link in the same page) so I come here for some support of you
Here is the code snippet for you to be able to locate easily inside my website the code while using the code explorer in chrome:
<a href="project-detail.html" target="_blank" class="project-box">
<div class="project-box-inner">
<h5>Boranito<br>Skat</h5>
<div class="project-category">House Design</div>
</div>
</a>
however, will leave the javascript source files here since I am requested to give all possible details here to avoid users being in the need of accessing , here are all the 3 javascript classes handling all the template events which I don't know what they do:
(since I am not able to attach the source code of the javascript classes, I will attach a link for each js file so you could check it, thanks in forward.....
Thank you in advance.
Problem
Your script (scripts.js) on line 13 toggle animsition's feature for links: linkElement: "a.project-box". This will add an handler to every a element with a project-box class. The handler is the following code (I've commented for your understanding):
function(event) {
event.preventDefault(); // prevent the default behavior for links (prevent the behavior you want)
var $self = $(this);
var url = $self.attr('href'); // get the url of the link
if (event.which === 2 || event.metaKey || event.shiftKey || navigator.platform.toUpperCase().indexOf('WIN') !== -1 && event.ctrlKey) {
// open the link in a new tab ONLY IF I clicked on it with the middle mouse button or with Ctrl/Cmd pressed
window.open(url, '_blank');
} else {
// Else do the animation and open the link in the same tab
__.out.call(_this, $self, url);
}
}
Fix
To fix your problem, you can either
Change the way you setup Animsition, be aware that it can modify other links/behaviors in your site
Change the class of your link so it is not matched as the linkElement of your Animsition's setup. For example: remove the class of the a element (it will affect the styling) and you will see that the link opens in a new tab.
Appendix
You can find the handler's code in the devtools -> your link element -> handlers -> click.
I am trying to make a chrome extension which requires me to collect the post links. But the problem with collecting the link is that it is available on the anchor tag on the timestamp that FB provides over each post.
But the href of the anchor tag is populated dynamically when you hover over the element.
I tried dispatching a mouseover and mouseenter events on the element but the href is still not populated.
My function :
const hoverOverTag = (element) => {
var event = new Event('mouseover', {
'view': window,
'bubbles': true,
'cancelable': true
});
element.addEventListener('mouseover', function(e) {
console.log("hover");
console.log(e);
});
element.dispatchEvent(event);
}
The event listener runs and logs the event properly. But still href does not get populated.
I am running this in a content script, is there any way i can get the post link ?
In the following I will describe my method I followed to tackle the issue, the findings and a solution that worked for me.
After loading the Facebook page, I used the Google Chrome Development Tools to inspect the <a> element.
Then I added an XHR/fetch Breakpoint on any XHR or fetch. Then hovered the mouse to trigger the event and immediately the code was interrupted and the stopped at the breakpoint.
After following the code it became clear that the front-end retrieve the post-id of dynamically by sending an Ajax request to the API node /bulk-route-definitions/ at Facebook. Although it is theoretically possible to get the post-id by manually calling that API node with the correct request header data, pursuing that potential solution is simply too time consuming because of all security/privacy protection Facebook currently employs.
Right after that I started looking at triggering the event programmatically as mentioned in the question above, so I triggered the breakpoint again and checked the call stack and reverse followed the obfuscated and uglified code.
Eventually I found it:
var event = new FocusEvent('focusin', {
'view': window,
'bubbles': true,
'cancelable': true
});
the_a_element.dispatchEvent(event); //reference to the_a_element in the page DOM
Done.
I would like to track if a toast (or any "popup element") gets displayed using Google Analytics Event Tracking via GTM.
Whether or not the toast gets displayed is defined by jQuery code and based on cookie information like so
function ShowToast(Msg){
$('#toast-msg').html(Msg);
$('#toast').animate({ left: '-10px' });
}
called by
<script type="text/javascript">
$(function() {
ShowToast("SOME HTML");
});
</script>
This is what I got in GTM so far using a custom variable
function(){
if(document.querySelector("#toast #toast-msg").length > 0){
return true;
}
}
with a trigger listening for this variable to be true and the usual Universal Analytics Event Tag. The idea is to simply check if the toast-msg is shown or not, which works fine in preview mode.
Now to the problem: The tag is listening to gtm.js (pageview), but the jQuery code from the toast might load only after gtm.js is ready. Hence, sometimes the toast is not yet displayed when the tracking code is ready to fire and the event is not recorded.
Is there a way to use GTM and Javascript / JQuery to make sure all JQuery is loaded before GTM variables/triggers/tags are resolved? Or a completly different approach?
Make Sure you have the dataLayer initialized in the <head> of your document by including this line of code: <script>window.dataLayer = window.dataLayer || [];</script>
Add this code to your jQuery toasts (or whatever else you want to track) dataLayer.push({'event': 'event_name'});
Create a Custom Event trigger in GTM with the event_name you chose above.
Create a GA Tag of type event with the above trigger
One method is to push an event to dataLayer when the popup is loaded.
the other method is you can fire your code and gtm.dom or gtm.load(when the page is completely loaded)
Check the related article for more details http://marketlytics.com/analytics-faq/control-gtm-tags-to-wait
While using the dataLayer works, as suggested by others, I also found that my code works using two alterations:
Change errenous code: document.querySelector("#toast #toast-msg").innerHTML.length > 0 I forgot the innerHTML attribute
In order to ensure that jQuery has loaded I changed the trigger type to gtm.dom, which triggered the event reliably thus far.
I have looked around, but I'm not seeing anything that specifically addresses this. My goal is to have a link, which can be clicked to either add content or "undo" the act of adding that content. I am trying to us the following:
function ShowDiv() {
if (null == window.set) {
document.getElementById("box2").innerHTML = "Some Content";
window.set = "set";
} else
location.reload();
}
Link
<div id="box2"></div>
This allows me to click the link to show some content inside some div. And then to click the link again to remove that content.
However, I am wondering if there is a way to achieve this result, that also allows the user to click the browser's back button to return the page to the state it was in before triggering the function (e.g., to reload the page).
You are looking for the HTML5 history API. This allows you to push state onto the history as if the browser loaded a different location without actually sending a request and replacing all content and javascript state. This allows the back and forward buttons to work, as long as your JavaScript code shows the correct content according to the current URL.
Resources:
W3C
MDN
Dive Into HTML5
I already read many article about this issue in here, SO.
I just want to discuss how to do it. NOT the moral issue.
--
for example.
at the google search webpage.
before I click the link, the link does not indicate the google url.
but After I click the link with shift-key, the url on the status bar is changed.
this mean the google webpage indicate 'Fake URL'.
the google compressed script is too difficult to read and analyze.
#
edited
The second url should work on ie8 even if I click with ctrl key.
The browser always shows link's href-attribute (no way to fake this), but you can capture the click event for link and do whatever you want. An example using jQuery:
$('a').each(function() {
$(this)
.attr('orig_href', $(this).attr('href'))
.attr('href', 'http://google.com');
}).click(function(e) {
e.preventDefault();
window.location.href = $(this).attr('orig_href');
});
Click me
You use javascript to change the status in the window:
window.status='Your Message Here';
You would attach this to some event (onmouseover)
For example: