Little bit confused... I am trying to track mailto links being clicked, but constantly 'pageTracker is not defined' is shown. I have the following code just before my end body tag ()
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-000000']); // This is my account number, I have added the zeros in this editor
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Then I am using this in my mailto links
hello#mydomain.co.uk
I cannot see why its not working? Any help would be appreciated
The new Async Google Analytics code (that you're using) works a bit differently than the non-Async. Any time that you want to call a method on pageTracker you simply push a "message" onto the "_gaq" queue.
hello#mydomain.co.uk
Although, tracking a mailto link may work better as an event:
hello#mydomain.co.uk
For more info take a look at the Async Tracking Users Guide.
We can also add:
//mantain syntax between old and new asynch methods
//http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html#Syntax
function _pageTracker (type) {
this.type = type;
this._trackEvent = function(a,b,c) {
_gaq.push(['_trackEvent', a, b, c]);
};
}
var pageTracker = new _pageTracker();
in new code to mantain old code in pages.
Here is the code :
onClick="_gaq.push(['_trackEvent', 'pdf', 'download', '/pdf/myPdf'])">myPdf</a>
I needed a way to tack downloading PDFs too and heres what I used:
Download Brochure
For more info about _trackEvent, heres the API Doc page
Related
I want to have a site search, I am using google custom search, but it has its own style. I want to change the style of the search box using CSS.
Please no AJAX & no jQuery.
JavaScript:
(function() {
var cx = 'myID';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
HTML:
<gcse:search></gcse:search>
I want sth like : www.w3schools.com
You can use DOM inspection tool right click on the search bar and inspect element . And you can determine the IDs and classes and the default styles .
Next, you can make your own css rules which will override the default ones try the css code like this :
input.gsc-input {}
input.gsc-search-button {}
form.gsc-search-box {}
div.gsc-control-cse {}
I'm currently trying to follow this FB resource about tracking on page events with conversion pixels.
If I'm understanding correctly, the gist of it is to paste my base pixel code in the header, then add the tweaked "example code" underneath it.
Here is our base pixel code:
<!-- Facebook Conversion Code for Cool Company LLC -->
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', '6029151989664', {'value':'0.00','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6029151989664&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
And here is the "example code" they say to use for tracking in-page events:
function trackConversionEvent(val, cny) {
var cd = {};
cd.value = val;
cd.currency = cny;
_fbq.push(['track', '<pixel_id>', cd]);
}
<button onClick="trackConversionEvent('10.00','USD');" />
And finally the question: we want the in-page event to be hitting the submit button on the rightside subscription widget at http://wearablestylenews.com/
To do this, do I just change the last line of example code to this?
<input id="ykfmc-submit_0-2f6a0367b1" onClick="trackConversionEvent('0.00','USD');" />
And do I just put it after the base code in the header?
Thanks guys, I really appreciate your help!
jQuery(document).ready(function($) {
/******* Load CSS *******/
$('head').append('<link rel="stylesheet" type="text/css" media="all" href="'+('https:' == document.location.protocol ? 'https://' : 'http://') +'thesite.com/api/widgets/tghd/pages.css">');
});
The above code is what I use to add the style sheet to the document. The code inspector shows that the code has been added but the console does not display that the browser has requested the document and the styles do not take affect.
How can I add a style sheet to an already loaded document and have it take affect.
BTW. if it matters, I am using this code for a widget so I will be used across multiple domains.
Thank You in advance for any help!
try this:
(function () {
var li = document.createElement('link');
li.type = 'text/css';
var href='http://' + 'thesite.com/api/widgets/tghd/pages.css';
li.setAttribute('href', href);
var s = document.getElementsByTagName('head')[0];
s.appendChild(li, s);
})();
OK after doing a few tests, I finally figured out what was going on. This original code was provided by: #Vicky Gonsalves
var li = document.createElement('link');
li.type = 'text/css';
var href=('https:' == document.location.protocol ? 'https://' : 'http://') +'thesite.com/api/widgets/pages.css';
li.setAttribute('href', href);
li.setAttribute('rel','stylesheet');
var s = document.getElementsByTagName('head')[0];
s.appendChild(li, s);
The changes that I made to this are:
I added the http and https switch to help with different connection types
added the attribute li.setAttribute('rel','stylesheet'); <-- which I believe fixed the problem.
We're having an issue with Virtual Pageviews not being recorded in Analytics.
We have the following tracking code at the bottom of the page (not the async version)
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-3']);
_gaq.push(['_trackPageview']);
(function ()
{
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
And for the individual virtual pages we're trying to track we have the following code:
$(".contact_sub a").click(function ()
{
//instantiate it
var pageTracker = _gat._getTracker("XX-XXXXXXXX-1");
//get company name
var companyName = $(this).parents(".resultContainer").find("H2").text();
//track this click event as a page view
pageTracker._trackPageview("/click-tracking/company/" + companyName + ".html");
$(".window_" + $(this).attr("rel")).dialog({
modal: true,
width: "350px"
});
return false;
});
In Firebug NET tab we can see the correct call be sent out to google and the Image is returned. The parameters being sent out are right too.
Problem is nothing is showing up in Analytics. We've done this for another project and it worked just fine.
I just noticed now that in the two lines that deal with getting an instance of the tracker there's one tiny difference and that's the last number. One is a 1 and the other is a 3. Not sure why that is that way.
Any help would be great.
Thanks
Jacques
The getTracker needs your website ID, as specified in google analytics. They should be the same basicly, those pageview are now being registered at another website. So just change the 3 in a 1.
On a single page webapp, I've implemented the google async tracker. I created a class to be able to make some simple calls to be able to track users across the site:
var GoogleAnalytics = {
config : {
'account':'UA-XXXXXXXX-X'
},
init : function(){
var _gaq = _gaq || [];
this.tracker = _gaq;
_gaq.push(['_setAccount',this.config.account]);
(function() {
var _ga = document.createElement('script'); _ga.type = 'text/javascript'; _ga.async = true;
_ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(_ga, s);
})();
},
doAsyncRequest : function(arr){
if(!this.tracker) this.init();
this.tracker.push(arr);
},
trackPageView : function(url){
var args = ['_trackPageview'];
if(url) args.push(url);
this.doAsyncRequest(args);
},
trackEvent : function(category,action,label,value){
var args = ['_trackEvent',category,action];
if(label) args.push(label);
if(value) args.push(value);
this.doAsyncRequest(args);
},
trackCustom : function(index,name,value,scope){
var args = ['_setCustomVar',index,name,value];
if(scope) args.push(scope);
this.doAsyncRequest(args);
}
}
When the app is loaded, I create an instance of the above like so:
var that = this;
require(['js/plugins/GoogleAnalytics'],function(ga){ that.ga = GoogleAnalytics; });
it uses require.js to load in the above script, and assign this.ga to it.
Then, when trying to track a page view, I use this:
var that = this
$.each(payload.events,function(index,event){
if(event.eventType == 'page'){
var pagePath = event.currentURL.replace(/^(https?:\/\/[^\/]+)/i,'');
that.ga.trackPageView(pagePath);
} else {
that.ga.trackEvent(event.eventType,event.elementClass);
}
});
payload.events just contains an array of events. an event looks something like this for a page view: {'eventType':'page','currentURL':'http://www.testurl.com/#!/testing/test/test'}
This all gets to google ok, but in analytics, it tracks a page view as a unique page visit, and doesn't track across the users' visit. So my analytics are somewhat useless, as it looks like I have WAY more visits than I really do, and a ridiculous bounce rate.
Is there something I'm missing that would fix this and make it track page views like a normal analytics install?
Frankie got this one right in my comments, I believe the issue was with require.js making a new scope and something breaking there.