I'm looking to include a google analytics event tracker inside my links of a popup on a leaflet map.
Here's what I'm trying now (note the onlick portion of the a tags):
var League = L.featureGroup([
L.marker([36, -76], {icon: icon}).bindPopup("<center><img src='imgs/K.jpg' alt='Red dot' width = 200/></center></br><table><tr><td>Team</td><td>K</td></tr><tr><td>Level</td><td>Level 1</td></tr><tr><td>League</td><td><a href='http://example.com' onclick=\"captureOutboundLink('http://example.com'); return true;\" target='_blank';>League 1</a></td></tr></table>"),
L.marker([36, -76], {icon: icon}).bindPopup("<center><img src='imgs/H.jpg' alt='Red dot' width = 200/></center></br><table><tr><td>Team</td><td>H</td></tr><tr><td>Level</td><td>Level 1</td></tr><tr><td>League</td><td><a href='http://example.com' onclick=\"captureOutboundLink('http://example.com'); return true;\" target='_blank';>League 1</a></td></tr></table>")
]);
Where captureOutboundLink is:
var captureOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {
'transport': 'beacon',
'hitCallback': function(){document.location = url;}
});
}
The map functions fine. URL clicks are opened in a new window as intended, but google analytics isn't picking up the click events (the rest of the site tracking analytics work fine). I suspect it's the javascript inside of javascript stuff going on here, but I'm not sure what to do next. Any help would be much appreciated.
Related
just want to check to make sure I have the correct syntax with the event tracking...
ga('send', {
'hitType' : 'event',
'eventCategory' : 'links',
'eventAction' : 'click',
'eventLabel' : 'sidebar-link',
'nonInteraction' : 1
});
This is used for links that open in a new tag. Also I've found that for links that do not open in a new tag, you can add the member:
'hitCallback': function() { document.location = 'http://link-to.com'; }
Is this all looking correct? Because I'm not receiving any tracking events on my pages. I checked in debugger, and the code is being called for sure, but nothing is coming up in GA. What's up?
I dont believe you have the correct syntax. Try this syntax
ga('send', 'event', 'button', 'click', 'nav buttons', 4); //USE THIS
ga(send, event, eventCategory, eventSction, eventLabel, eventValue) // VARIABLE NAMES
**** You do not need to include the event value parameter. All other event parameters are recommended.
Gonna answer my own question here as I got it working - also I want to provide an example for the alternate syntax, for those who might be confused about it like I was. **Edited for clarity
First off, it was a matter of waiting for a day for the results to show up, even in "Real Time" mode.
Second, this is what I went with:
For links that open in new tab:
//HTML
<a class='newtab' data-type='label-name' href='http://blah.com' target='_blank'>Link to blah</a>
//JS
$('.newtab').click(function(){
var label = $(this).attr('data-type');
ga('send', 'event', 'category-name', 'click', {
'eventLabel' : label,
'nonInteraction' : 1
});
});
For links that open in same tab:
//HTML
<a class='sametab' data-type='label-name' href='http://blah.com'>Link to blah</a>
//JS
$('.sametab').click(function(){
var linkTo = $(this).attr('href');
var label = $(this).attr('data-type');
ga('send', 'event', 'category-name', 'click', {
'eventLabel' : label,
'nonInteraction' : 1,
'hitCallback' : function() { document.location = linkTo; }
});
return false;
});
The part that threw me was in the example where it showed how to add either all attributes in an object or some attributes in the object, and which attributes were available. Anyway, voila :)
Simple question:
Im trying to track outbound links on my homepage. Problem: I only see the events in the realtime section. Does someone know where its stored? Im storing it with the following code:
var trackOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
function () {
document.location = url;
}
});
}
As said in comments.
You can find events stored in Behavior->Events section of the GA menu. It will take some time to show up - up to 24h
I have track event like this.
$('.payment_button').on('click', function() {
var _this = this;
ga('send', 'event', 'Payment', 'Payment', 'Payment Checkout', {
'hitCallback': function() {
$(_this).parents('form').first().submit();
}
});
It's worked good, but I don't know where to view results. In google analitics admin I can view my event only in real time events, but after 30 minuts it's removes and I can't view it.
UPDATE: Google Analytics generally updates reports every 24 hour
On the left side of the reports page where the Report Navigation menus is, it's under
Behavior > Events
When tracking links, do i need to put this code at the end?
return _gaLink(this,'#');
What exactly doe it do? My understanding of this is not clear.
Are you looking to tracking outgoing/external links? There is no Google Analytics function called _gaLink. Can you post up a snippet of your code?
_link() is used for X-Domain tracking, please see the documentation
If you simply wish to track "outbound links", i.e. links to other sites, then use this piece of code (not this requires jQuery):
///////////////////
// _trackOutbound
jQuery(document).ready(function($) {
$('a[href^="http"]:not([href*="//' + location.host + '"])').live('click', function(e) {
_gaq.push(['_trackEvent', 'outbound', 'click', this.href.match(/\/\/([^\/]+)/)[1]]);
_gaq.push(['t2._trackEvent', 'outbound', 'click', this.href.match(/\/\/([^\/]+)/)[1]]);
});
});
I have a google map embedded in a site that loads a kml file at https://www.getstable.org/who-can-help/therapist-map-kml using KmlLayer. Sometimes the map doesn't load up, I presume because google maps has a strict timeout, and often some of the pins on the map aren't clickable but some are with no clear reason why. Does anyone know what the timeout limit is on kmlLayer and how to increase it? Also is there any reason why sometimes some of the pins aren't clickable (ie no InfoWindow appears when you click a pin and the cursor doesn't change to a hand)?
Here's the code that shows it (some of the fields are templated):
<div id="map_canvas" style="width: 856px;height: 540px;">Loading...</div>
<script type="text/javascript" src="{protocol}://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var the_map = {
options : {
zoom:{embed:zoom_level},
center:new google.maps.LatLng({embed:latitude},{embed:longitude}),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
geocoder : null,
map : null,
init : function() {
this.geocoder = new google.maps.Geocoder();
$('#map_canvas').delegate('a', 'click', function(event) {
window.location.href=$(this).attr('href');
return false;
});
},
load_map : function() {
this.map = new google.maps.Map(document.getElementById("map_canvas"), this.options);
query = encodeURI('{site_url}{embed:map_url}');
var ctaLayer = new google.maps.KmlLayer(query,{
preserveViewport:true
});
ctaLayer.setMap(this.map);
}
}
$(document).ready(function() {
the_map.init();
the_map.load_map();
});
</script>
The Google Servers have an unspecified timeout, but testing shows it to be 3-5 seconds. This timeout is not something you can affect. The solution is to make your server respond faster. This issue almost always comes down to a file that is too big (yours isn't) or from dynamically generating the KML. You need to optimize this and that may mean finding a way to create a static KML file.
Features that are not clickable are almost certainly a problem with your KML. You can validate your KML to check for this:
Feed Validator
KML Validator
You can also test your KML by loading it at maps.google.com.