I'm trying to implement Google Analytics on Single Page Application. I'm trying to use Autotrack to track the virtual page views. But, it's not working.
Code:
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXX-1', 'auto');
ga('require', 'urlChangeTracker', {
shouldTrackUrlChange: function(newPath, oldPath) {
newPath = newPath.split('?')[0];
oldPath = oldPath.split('?')[0];
return newPath != oldPath;
}
});
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/autotrack/0.6.4/autotrack.js"></script>
Quoting from related github issue:
"The urlChangeTracker plugin does not support tracking URL hash changes. This is mentioned in the overview section of the plugin documentation.
Since almost all browsers in use today support the History API, that's what you should be using when creating SPAs. Hash changes should only be used for in-page navigation to anchor links."
Related
Google Goal conversion not working when I download pdf.
Here I followed following steps:
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX', 'auto');
ga('send', 'pageview');
</script>
<a href="/wp-content/uploads/2017/03/SEO-ebook-Final.pdf" onClick="javascript:_gaq.push(['_trackPageview','/wp-content/uploads/2017/03/SEO-ebook-Final.pdf']);">Ok<a/ class='bold-uppercase'>
</html>
gaq.push us classic Google analytics code as in ga.js. Your Google Analytics snippet shows you are using analytics.js which is universal analytics.
So basically you are mixing things you shouldn't be.
<script>
/**
* Function that tracks a click on an outbound link in Analytics.
* This function takes a valid URL string as an argument, and uses that URL string
* as the event label. Setting the transport method to 'beacon' lets the hit be sent
* using 'navigator.sendBeacon' in browser that support it.
*/
var trackOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {
'transport': 'beacon',
'hitCallback': function(){document.location = url;}
});
}
</script>
You'll also need to add (or modify) the onclick attribute to your links. Use this example as a model for your own links:
Check out example.com
code ripped from Track outbound links
Can't figure out how to add the analytics code using DocHead.loadScript . Documentation assume that you more or less already understand it.
Have been trying in component, Client etc. Manage to get DocHead.setTitle(title); etc to work without problem.
Where do i add this DocHead.loadScript to make it work?
var gaScript = 'https://www.google-analytics.com/analytics.js';
DocHead.loadScript(gaScript, function() {
// Google Analytics loaded
ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');
});
Github: https://github.com/kadirahq/meteor-dochead
I have setup google analytics on a small 1 page application website with 3 sections. I have implemented page fields and tracker object. However, every page title in google analytics is coming across as "Contact" although I have designated page titles for each pageview as below:
ga('create', 'UA-50789730-1', 'auto');
ga('set', {
page: '/',
title: 'Home'
});
ga('set', {
page: '/#features',
title: 'Features'
});
ga('set', {
page: '/#download',
title: 'Download'
});
ga('set', {
page: '/#contact',
title: 'Contact'
});
ga('send', 'pageview', '/');
ga('send', 'pageview', '/#features');
ga('send', 'pageview', '/#download');
ga('send', 'pageview', '/#contact');
Am I doing something wrong here?
Thanks!
Whenever you call set you're overriding the previously set data. That's why "Contact" is all you're seeing for the title in the code shown above, since that set call overrides the previous two.
I'd recommend reading the analytics.js overview to get a better idea of how the underlying library works:
https://developers.google.com/analytics/devguides/collection/analyticsjs/
Then once you have a better understanding, you should read the guide on tracking single page applications, as there are some gotchas you should be aware of:
https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
I realize that there's a plenty of questions about not working GA goal tracking. I did my homework and read lots of them before posting my question.
Here's my issue... This is the documentation that I used to create my code: https://developers.google.com/analytics/devguides/collection/analyticsjs/events
I am using the analytics.js version
<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-xxxxxxxxxxx-x', 'mywebsite.com');
ga('send', 'pageview');
</script>
I tried to implement the code via both pure javascript and jQuery but neither seems to work.
Here's my code:
link to be tracked:
Get In Touch Today
jQuery approach:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#cta-footer-btn').on('click', function() {
ga('send', 'event', 'CTA_footer', 'contact_footer');
});
});
</script>
I also tried the pure js approach suggested:
<script>
var downloadLink = document.getElementById('cta-footer-btn');
addListener(downloadLink, 'click', function() {
ga('send', 'event', 'CTA_footer', 'contact_footer');
});
/**
* Utility to wrap the different behaviors between W3C-compliant browsers
* and IE when adding event handlers.
*
* #param {Object} element Object on which to attach the event listener.
* #param {string} type A string representing the event type to listen for
* (e.g. load, click, etc.).
* #param {function()} callback The function that receives the notification.
*/
function addListener(element, type, callback) {
if (element.addEventListener) element.addEventListener(type, callback);
else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
</script>
Neither seems to be tracking the link clicks.
Any thoughts or suggestions why this is not working will be greatly appreciated.
Thanks!
Make sure you have the analytics tracking code inserted in the head section of the document (not necessary, but makes sure that the required library is fully loaded along with the ga object before making any references to ga() functions), and also make sure jQuery is also loaded before being used. You can use the console (usually F12 in browsers) to check for any error being thrown. These are are general steps to verify if you have tracking installed properly.
It might take a while before data starts showing up in reports if you have just installed, so don't worry. You can install the GADebug extension for Chrome to check if tracking beacons are sent properly.
Also, you can use the click() function from jQuery. It works fine for me.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#cta-footer-btn').click( function() {
ga('send', 'event', 'CTA_footer', 'contact_footer');
});
});
</script>
Hope that helps! :)
I am having a bit of difficulty implementing google analytics to my rails 4 project. I included the tracking code to the bottom of my layouts file and have even tried to remove turbolinks as suggested here however i google is still unable to detect this tracking cookie. Any ideas ?
I set up Google Analytics a few days before..
1.) The Turbolink Workaround
With Turbolinks, the Google Analytics JavaScript library is not sufficient to record a page visit for every page update.
The workaround should be loaded on every page and it can be included as an application-wide asset (it will load before Turbolinks).
Add the file app/assets/javascripts/analytics.js.coffee to include the Turbolinks workaround:
app/assets/javascripts/analytics.js
// Coffee
$(document).on 'page:change', ->
if window._gaq?
_gaq.push ['_trackPageview']
else if window.pageTracker?
pageTracker._trackPageview()
// Javascript
$(document).on('page:change', function() {
if (window._gaq != null) {
return _gaq.push(['_trackPageview']);
} else if (window.pageTracker != null) {
return pageTracker._trackPageview();
}
});
2.) Create a Footer Partial
Just create a a Partial into app/views/layouts -> _footer.html.erb
Then Call your Partial on your application.html.erb -> <%= render 'layouts/footer' %>
Insert into your Footer the Analytics Track Code:
<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-XXXXXXX-XX', 'herokuapp.com');
ga('send', 'pageview');
</script>
You must replace UA-XXXXXXX-XX with your tracking ID, and herokuapp.com with your Domain if you have any.
Here is code without using coffeescript:
app/assets/javascripts/analytics.js
$(document).on('page:change', function() {
if (window._gaq != null) {
return _gaq.push(['_trackPageview']);
} else if (window.pageTracker != null) {
return pageTracker._trackPageview();
}
});
I used this gem and was very easy to set up. No extra .js file creation.
Rails 3 helpers to manage google analytics tracking. Mostly intended for small to medium websites.
Just install the gem:
gem 'google-analytics-rails', '1.1.0'
Then run:
bundle install
Finally, this goes # the production environment configuration:
Production only
config/environments/production.rb:
# replace this with your tracker code
GA.tracker = "UA-112233-4"
app/views/layout/application.html.erb, in the <head> tag :
<%= analytics_init if GoogleAnalytics.valid_tracker? %>
I saw results immediately after pushing to Heroku.
I removed Turbolinks, and used the RailsProjects script, provided here:
http://railsapps.github.io/rails-google-analytics.html
Worked for me no problems. It detected it, and after a little while I could see the real time users so I know it is working.
Edit: The script appears to support Turbolinks on or off which is great.
# If Turbolinks is supported, set up a callback to track pageviews on page:change.
# If it isn't supported, just track the pageview now.
if typeof Turbolinks isnt 'undefined' and Turbolinks.supported
document.addEventListener "page:change", (->
GoogleAnalytics.trackPageview()
), true
else
GoogleAnalytics.trackPageview()
I was facing some problem in adding the GA with turbolinks so I referred some blogs and answers on stackoverflow and wrote a small blog on this. Please refer to this link
http://tarungarg402.blogspot.in/2015/01/google-analyicts-wth-rails.html
I use this in my rails app. I just put this in my application.js.erb
// GA racking code
(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-XXXXX-<%= Rails.env.production? ? '1' : '2' %>', 'auto');
// I have 2 GA properties- one for debug and another for production
// accommodate Turbolinks and track page views
$(document).on('ready page:change', function() {
ga('send', 'pageview');
});