I want to integrate GA Tracking Event on buttons in WordPress. Currently my theme is using ShortCodes and I can add specific .Class to it.
[vc_button text="Order Now" type="blue" align="left" url="#" size="big" class="ordernow"]
Google Analytic code is added on the site which is on Local Host and it's working. I found an article on this but don;t know what I'm missing.
http://www.gravitatedesign.com/blog/event-tracking-google-analytics-wordpress-edition/
There will be around 4 buttons of "Order Now" on a single page and I want to track their conversion rate with Google Analytic so I will know on which button visitors are getting engage. Hope this will deliver the exact thing that I want to achieve..
please provide your result html of that buttons.
I usually use something like this
$('.ordernow').on('click', function(e) {
ga('send', 'event', 'order', document.URL);
});
you can add additional classes to track each button, example:
$('.ordernow button1').on('click', function(e) {
ga('send', 'event', 'order1', document.URL);
});
$('.ordernow button2').on('click', function(e) {
ga('send', 'event', 'order2', document.URL);
});
hope this will help you.
Related
I have a WordPress website and use Google Analytics to track submission of a CF7 form via goals. I have recently added a second form and would like to track this as a separate goal. I've tried altering the event create using this following script:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if (event.detail.contactFormId == '770' {
ga('send', 'event', 'Consultation Request', 'submit');
}
else {
ga('send', 'event', 'Contact Form', 'submit');
}
}, false );
</script>
This still don't seem to separate the forms when I track the events created. Is there something else I can do?
Instead of adding this custom script, I ended up using a plugin called Contact Form 7 Submission DOM tracking This plug added the code needed to create separate goals. Also has a few extra features such as the ability to hind the form after submission.
When I try to set the appVersion in google analytics, then my event tracking stops working. Specifically, I'm trying to include the app version with event tracking so I can know which version of the app caused an event.
I've tried setting the app version like this:
ga('set', 'appVersion', app.version);
I've tried like this:
ga('send',
'event',
eventCategory,
eventAction,
{'page': pageName, 'appVersion' : app.version });
And I've also tried the alternative syntax:
ga('send',
{'hitType' : 'event',
'eventCategory' : eventCategory,
'eventAction' : eventAction,
'page' : pageName,
'appVersion' : app.version});
If I include appVersion, then event tracking stops working. No events show in realtime and no show the next day in the Behavior/Events section. The PageViews still work though.
As requested in the comments, I am editing to add in my event tracking code. It's been through several variations while I tried solve this problem. Here's what it looks like currently.
var app = {
trackEvent: function (pageName, eventCategory, eventAction, optionalEventLabel, optionalEventValue) {
var eventObject = {
'eventCategory' : eventCategory,
'eventAction' : eventAction,
'optionalEventLabel' : optionalEventLabel,
'optionalEventValue' : optionalEventValue,
'page' : pageName,
};
console.log("app.trackEvent - " + JSON.stringify(eventObject));
ga('send', 'event', eventObject);
}
}
I call this method from many places using a call like:
app.trackEvent("PageNameValue", "EventCategoryValue", "EventActionValue", "EventLabelValueIfIHaveOne", AnIntegerValueIfIHaveOne);
Any help or suggestions will be greatly appreciated.
Edit...
I found the following bug report that seems to apply: https://code.google.com/p/analytics-issues/issues/detail?id=366
The bug reporter mentions solving this problem by setting up a custom dimension. I will give that a try.
This appears to be be a Google Analytics bug. See https://code.google.com/p/analytics-issues/issues/detail?id=366 for more information.
As suggested by the bug reporter, the workaround is to use a custom dimension that you define in the Admin / Custom Definitions / Custom Dimensions section of the Google Analytics console.
Click "New Custom Dimension"
Enter name ( I entered customAppVersion )
Choose scope ( I chose Hit )
Click Create
Google will then suggest code examples for you, like...
var dimensionValue = 'SOME_DIMENSION_VALUE';
ga('set', 'dimension1', dimensionValue);
The only thing in the code sample that you need to change is the value of 'dimensionValue'. So I ended up with the following code.
ga('create', 'UA-########-#', 'auto');
ga('set', 'checkProtocolTask', null); // Disable file protocol checking (so that GA will work on Android devices)
ga('set', 'dimension1', app.version);
ga('send', 'pageview');
After this, the custom dimension will be applied to each hit recorded by Google Analytics and you can use that custom dimension to filter your results in the Google Analytics console.
As per google
Since the appName field must be sent with all app hits, it's often
best to set that field on the tracker itself using the set command or,
alternatively, when the tracker is created:
ga('create', 'UA-XXXXX-Y', 'auto', {
'appName': 'myAppName'
});
// The `appName` field is now set on the tracker, so
// screenview hits don't need to include it.
ga('send', 'screenview', {appVersion: '1.2'});
// Sending multiple parameters
ga('send', 'screenview', {appName: 'com.company.app', appVersion: '1.2'});
More information here
It works if you set at least the "appName", it's a good practice to set "appName" and "appId" before to set "appVersion"
ga('set', 'appId', app.id);
ga('set', 'appName', app.id);
ga('set', 'appVersion', app.version);
This is pretty much covered topic for original FB/Twitter buttons. But what if I have my own "share on fb" button? Like this:
<div id="fb_share"><a target="_blank" href="http://www.facebook.com/share.php?u=blah-blah">Share on FB</a></div>
so I've come up with the folloing solution:
var FBbtn = document.getElementById("fb_share");
FBbtn.addEventListener('click', function() {
ga('send', 'social', {
'socialNetwork': 'facebook',
'socialAction': 'share',
'socialTarget': window.location
});
//console.log('tracked');
});
That is placed AFTER the Google Analytics code.
Despite the fact it wont catch FB callback - it is supposed to do the trick but for some reason I still cannot see any results in Analytics so the question is this: will the solution actually work? In fact it could be even like this I believe:
FB
Your 'share on Facebook' links causes the page to navigate (and not open a new window/tab). When this navigation happens, most mainstream browsers cancel all pending HTTP requests for the current page and then navigates to the new page (fb.com)
In this scenario, one of the pending HTTP requests will be the GA event tracking call which will therefore never complete and never be received by the GA servers.
What you need to use is the GA hit callback functionality, this essentially cancels the native navigation (to FB), sends the tracking call and waits enough time for it to complete and then does a JavaScript redirection to the next page.
You should read the google docs here
In your case your event tracking function should be similar to this:
var FBbtn = document.getElementById("fb_share");
FBbtn.addEventListener('click', function() {
ga('send', 'social', {
'socialNetwork': 'facebook',
'socialAction': 'share',
'socialTarget': window.location,
'hitCallback': function(){
window.location = this.href;
}
});
//console.log('tracked');
return false;
});
So I've made the following changes:
Added the hitCallback property to the event tracking call. this is an anonymous function that is called once the GA servers have sent their response to the event tracking.
added a 'return false' statement which cancels the native functionality and then relies on the hitCallback function to do the navigating.
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
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]]);
});
});