ok, so, I have been trying to make _gaq.push work since so long now.
And my corresponding code is as below.
var ext_id = localStorage.ext_id;
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxx-xx']);
_gaq.push(['_trackPageview']);
//console.log(_gaq);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = chrome.extension.getURL('js/ga.js'); //uncomment this
//ga.src = "js/ga.js"
// ga.src = 'https://ssl.google-analytics.com/ga.js';
document.head.append(ga); // make it head
// var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); // comment this out
})();
chrome.runtime.onConnect.addListener(function(port) {
console.assert(port.name == "google-analytics");
port.onMessage.addListener(function(response) {
console.log("Message Passing with response",response.category,response.action, response);
// _gaq.push(['_gat._forceSSL']); // remove this
_gaq.push(['_trackEvent', response.category, response.action,ext_id]); // trouble shoot this
console.log(_gaq, "sending this");
});
});
so, the above will be run when there's no activity on the payments page for more than 1 second. And its triggering properly, i.e its executing after 1 second of inactivity on payments page. But, but _gaq.push is showing no trace in the network tab, to make it more obscure, I'm not even getting any error. Can someone pls tell me what I could possibly be doing wrong?
The gaq.push looks fine and should work.
I think your ga.js library is not loading. Maybe since getURL is deprecated? https://developer.chrome.com/extensions/extension#method-getURL
Related
I keep getting JS errors in my browsers web console, I have been able to clean up some but I also seem to break more and more the harder I try. I'm not exactly the most experienced JavaScript coder and I just don't know how to solve this to prevent further issues on my clients site.
Any help or insight on what I could do would be much appreciated!
[21:34:36.569] TypeError: $ is not a function # http://bolivares.com/shop/aurelio-tank-baby-blue/:103
http://bolivares.com/shop/aurelio-tank-baby-blue/
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35293709-1']);
_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>
<script>
/* <![CDATA[ */
// call fancybox
function openFancy(){
setTimeout( function() {$('#autoStart').trigger('click'); },3000); // show after a second
}
// create cookie on button click
function dontShow(){
$.fancybox.close(); // optional
$.cookie('cookie1', 'yes', { expires: 30 }); // expiration in 30 days
}
function askLater(){
$.fancybox.close(); // optional
$.cookie('cookie2', 'yes', { expires: 7 }); // expiration in 30 days
}
</script>
<script>
$(window).load(
function() {
var visited = $.cookie('cookie1') || $.cookie('cookie2') || $.cookie('cookie3'); // create cookie 'visited' with no value
if (visited == 'yes') {
return false;
} else {
openFancy(); // cookie has no value so launch fancybox on page load
$.cookie('cookie3', 'yes', { expires: 3 }); // expiration in 30 days
}
$('#autoStart').fancybox();
function toggleStuff(){
$('li.toggle-content').hide();
$('h4').click(function() {
$(this).find('ul').slideToggle();
});
}
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=500,left = 590,top = 275');");
}
});
</script>
It looks like you are trying to use jQuery but has not linked it in your source code. Try link it in your code.
And also as a general rule I would say to you to test very small parts of the code. Code one line or two and test it. This way you will know what coused the error and it will be easier to fix.
Make sure that you're including jQuery in your code BEFORE you run this function and any which require $. If this is already the case, check your console to make sure nothing is breaking it.
EDIT: Just took another look. Turns out the issue is that one of your plugins is calling jQuery.noConflict() (http://api.jquery.com/jQuery.noConflict/) Try using jQuery in this place instead of $, or if you're feeling risky, try resetting jQuery with $ = jQuery;
On a site I'm working on, the main section of the tracking code is located at the bottom of the pages (not my choice of placement, but that's where it is). That code is the main:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_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);
})();
On one specific page, I want to track an event that gets auto launched on page load. What I have for code at the top of the page (and therefore in a separate tag than the above code) is:
function getFile()
{
if("<%= getFileURL()%>".length>0){
window.location.href = "<%=getFileURL() %>";
var _gaq = _gaq || [];
_gaq.push(['_trackEvent', 'Downloads', '<%= getFileURL()%>']);
}
}
It doesn't seem to be tracking the event though. I'm sure I'm doing something wrong here and I can take some guesses, but it's not clear enough for me to know exactly what I need to change.
Two problems with your code:
You're redirecting before tracking the event. For best results (like #EkoostikMartin mentioned), you'll want a slight delay between the event tracking and redirect.
You've got a local _gaq defined inside getFile(), so you're not talking to the actual Google analytics code.
Try:
function getFile() {
var href = "<%=getFileURL() %>";
if (href.length > 0) {
_gaq.push(['_trackEvent', 'Downloads', href]);
setTimeout(function(){window.location.href = href}, 100);
}
}
You need to delay the redirect. Something like this below has worked for me in the past:
function getFile() {
var href = "<%=getFileURL() %>";
if(href){
_gaq.push(['_trackEvent', 'Downloads', href]);
setTimeout("gotoUrl('" + href + "')", 100);
}
};
function gotoUrl(href) {
window.location.href = href;
};
I'd like to remove the Google Analytics URL tracking code from the browser bar so that when a user copy / pastes the URL to share they don't bring along all the tracking data with them, which is both useless and able to skew the data down the road.
So I'm using history.js to run replaceState to basically get rid of the tracking data from the URL after a brief pause.
<script type="text/javascript">
setTimeout(function() {
if( window.location.search.indexOf( "utm_campaign" ) >= 1 ) {
window.history.replaceState( null, document.title, window.location.pathname);
}
}, 1000 );
</script>
Does anyone see any possible complications or problems with such a method?
The only problem that you might have is that Google Analytics might not have been fully loaded by the time that your timeout code runs.
With the Google Analytics tracker, there is an API that lets a function be queued after the GA data has been sent off to Google.
You can do something like this:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
_gaq.push(function() {
var newPath = location.pathname + location.search.replace(/[?&]utm_[^?&]+/g, "").replace(/^&/, "?") + location.hash;
if (history.replaceState) history.replaceState(null, '', newPath);
});
(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);
})();
Notice line 4, where a function is pushed to the _gaq object.
This function will replace the URL straight after the GA request has been sent.
Browser-Update.org provides a nice piece of javascript which alerts users of out-of-date browsers to update them. Unfortunately (a) IE7 is not included in the default list of out-of-date browsers, and (b) the script doesn't work over SSL.
The script they suggest is
<script type="text/javascript">
var $buoop = {}
$buoop.ol = window.onload;
window.onload=function(){
try {if ($buoop.ol) $buoop.ol();}catch (e) {}
var e = document.createElement("script");
e.setAttribute("type", "text/javascript");
e.setAttribute("src", "http://browser-update.org/update.js");
document.body.appendChild(e);
}
</script>
Instead, I'm using external javascript as follows:
app.onload(function() {
if ('https:' === document.location.protocol) return; // Browser Update script is not currently available over SSL.
var $buoop = {vs:{i:7,f:2,o:10.5,s:2,n:9}};
var e = document.createElement('script');
e.setAttribute('type', 'text/javascript');
e.setAttribute('src', 'http://browser-update.org/update.js');
document.body.appendChild(e);
});
To be clear: app.onload() is a nice function which adds functions to the window.onload handler.
This seems to work, but there's an unfortunate side-effect. If the alert is dismissed, it shouldn't show again in that browsing session. With the script above, that doesn't seem to work. On IE7, the alert happens on each page load. Is there a way around that?
var _shown = false;
app.onload(function() {
if(!_shown) {
if ('https:' === document.location.protocol) return; // Browser Update script is not currently available over SSL.
var $buoop = {vs:{i:7,f:2,o:10.5,s:2,n:9}};
var e = document.createElement('script');
e.setAttribute('type', 'text/javascript');
e.setAttribute('src', 'http://browser-update.org/update.js');
document.body.appendChild(e);
_shown = true;
}
});
and if the page is reloading between navigation store it in a cookie or as a session variable.
you could save a cookie when the alert is shown and check every time if that cookie exists before showing the alert.
I'm using the following code to load my Google Analytics (external javascript) in a way that is meant to not block rendering.
However, using both YSlow and Safari Web Inspector - the network traffic clearly shows that the ga.js script is still blocking rending.
/*
http://lyncd.com/2009/03/better-google-analytics-javascript/
Inserts GA using DOM insertion of <script> tag and "script onload" method to
initialize the pageTracker object. Prevents GA insertion from blocking I/O!
As suggested in Steve Souder's talk. See:
http://google-code-updates.blogspot.com/2009/03/steve-souders-lifes-too-short-write.html
*/
/* acct is GA account number, i.e. "UA-5555555-1" */
function gaSSDSLoad (acct) {
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."),
pageTracker,
s;
s = document.createElement('script');
s.src = gaJsHost + 'google-analytics.com/ga.js';
s.type = 'text/javascript';
s.onloadDone = false;
function init () {
pageTracker = _gat._getTracker(acct);
pageTracker._trackPageview();
}
s.onload = function () {
s.onloadDone = true;
init();
};
s.onreadystatechange = function() {
if (('loaded' === s.readyState || 'complete' === s.readyState) && !s.onloadDone) {
s.onloadDone = true;
init();
}
};
document.getElementsByTagName('head')[0].appendChild(s);
}
/* and run it */
gaSSDSLoad("UA-5555555-1");
Any ideas on how I can use JavaScript to delay the loading of the ga.js file, because the code above doesn't appear to do as it intends, until the entire page has been rendered so that I don't block rendering?
/* and run it */
gaSSDSLoad("UA-5555555-1");
Don't “run it” until the page has finished rendering. That is: onload or elsewhere further along. Don't include the above lines in your inline script block itself, or you won't gain anything.
If you use jQuery you can include the run it part in (which is the same as the body onLoad() event):
$(window).load(function() {
/* and run it */
gaSSDSLoad("UA-5555555-1");
});
and if that is not good enough, you run it a second later (for example...):
$(window).load(function() {
setTimeout("run_it()", 1000);
});
function run_it() {
/* and run it */
gaSSDSLoad("UA-5555555-1");
}
Shouldn´t be necessary though...
You can add a listener to the window, document or body's onload event and execute your gaSSDSLoad function at that time.
The code you get from Google Analytics is already non blocking.
Should be something like this:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5555555-1']);
_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>
Google suggests to include it before the closing tag.
In general if you want to load other javascripts asyncronously I suggest you use some loader like:
LABjs
or ControlJS