View Asynchronous JavaScript calls - javascript

I've upgraded the tracking script for Google Analytics to the Asynchronous version. The only issue I have is being able to debug the calls. I was able to track the older version in Firebug using the approach outlined on this site, but now cannot view the gaq.push calls. Is there way to view this in Firebug or another tool?
This is my sample test page I'm trying to track:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Google Analytics Event Tracking</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-13250000-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>
</head>
<body>
Lorem ipsum dolor sit amet....<br />
<script type="text/javascript">
_gaq.push(['_trackEvent', 'Videos', 'Play', 'Gone With the Wind']);
</script>
</body>
</html>
I'm trying to confirm that "_gaq.push" is actually working.

I just ran into the same issue, and so I did a google search and ended up on this stack overflow question.. I too thought that this would just show up as a xhr request in firebug as that would be the simple way to track an event. Turns out they are using a 1x1 pixel gif to do the tracking! If you look in the Net > All tab in Firebug you will see a GET request made looking similar to this:
https://ssl.google-analytics.com/__utm.gif?utmwv=5.2.4&utms=28&utmn=1818843630&utmhn=dev-marketplace.asos.com&utmt=event&utme=5(my-home*sub-nav-click*blog-posts)&utmcs=UTF-8&utmsr=1920x1080&utmvp=1920x618&utmsc=24-bit&utmul=en-gb&utmje=0&utmfl=11.1%20r102&utmdt=Build%20%23%20Developer%20Live%20Feed%20ASOS%20Marketplace&utmhid=1950484512&utmr=-&utmp=%2Flivefeed%2Fblogposts&utmac=UA-23521416-1&utmcc=__utma%3D159014575.706813547.1328542287.1328542287.1328604985.2%3B%2B__utmz%3D159014575.1328542287.1.1.utmcsr%3D(direct)%7Cutmccn%3D(direct)%7Cutmcmd%3D(none)%3B&utmu=6AAAAAAAAAAAAAAAQ~
These are the params sent in the request
utmac UA-23521416-1
utmcc __utma=159014575.706813547.1328542287.1328542287.1328604985.2;+__utmz=159014575.1328542287.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none);
utmcs UTF-8
utmdt Build # Developer Live Feed ASOS Marketplace
utme 5(my-home*sub-nav-click*blog-posts)
utmfl 11.1 r102
utmhid 1950484512
utmhn dev-marketplace.asos.com
utmje 0
utmn 1818843630
utmp /livefeed/blogposts
utmr -
utms 28
utmsc 24-bit
utmsr 1920x1080
utmt event
utmu 6AAAAAAAAAAAAAAAQ~
utmul en-gb
utmvp 1920x618
utmwv 5.2.4

The TamperData plugin for Firefox is very handy. It lets you see all HTTP traffic, with filtering etc. It also has a facility that lets you modify headers before the browser starts the HTTP transaction, which seems pretty awesome but I've never used it.

I do this by looking at the Resources tab in Chrome Developer Tools:
http://drktd.com/45VJ (notice the yellow 'XHR' -- that means XMLHttpRequest, which is the kind of call you're likely looking for)
If you need an in-depth view of each request into/out of your system, you should really install Charles Proxy. It is the best of breed for this kind of stuff.

If you do not see the requests happening in FireBug, then they are not happening. Google Analytics is not somehow sidestepping the browser's ability to track what HTTP requests it is making, your code is simply not making them.

Related

What it is the fastest asynchronous google analytics snippet?

i would to use fastest asynchronous google analytics snippet, but i'm not a good programmer and so i don't know what is the best:
A)
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='//www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference#async-snippet-minified
B)
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);
})();
</script>
About these codes i would like to know if is a problem to put the code inside not <script> but inside <script type="text/javascript"> and if is a problem to put not before </head> (like suggested for "normal" snippet)
I hope you can help me and sorry for my english :) Thanks a lot!
The would guess the first one. It uses async and doesn't depend on DOM modification while loading the page.
For HTML5, it does not matter if you use <script> or <script type="text/javascript">.
As for where to put in your code, normally javascript should be at the bottom of the page after all of your css/html has loaded. Javascript is loaded synchronously, so each file load will stop the rest of the page from loading until that specific file is fully loaded. The async tag is not fully supported by all browsers, so I would not rely on that. Instead, you should use an asynchronous loader (like requirejs or LAB.js).
As for where you should put the google analytics script, in my experience it doesn't matter too much. It sounds like you're prematurely optimizing -- https://stackoverflow.com/a/385529/5780021. Per google's instructions, I believe it's supposed to go in the header in order to improve their statistics around page load speeds.

Google analytics custom variables are not working when placed page view tracking in html file and variable tracking in javascript file

I have implemented google analytics for my site. The tracking code works fine when all code was in .js file. And .js file was included in tags of my html page.
Now, i have separated(split) code into two parts. I put pageView tracking in tag of my html file to capture accurate load time. Then i put custom variables and event tracking in my .js file.
The code looks like below
In HTML file:
<head>
<meta http-equiv="Cache-control" content="public">
<meta charset="utf-8">
<title>My web site</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
_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 src="js/scripts.js"></script>
</head>
In Scripts.js file:
if (_gaq) {
_gaq.push(['_trackEvent', Status, ErrorCode]);
_gaq.push(['_setCustomVar', 1, 'Visitor ID', varVistorID, 3]);
_gaq.push(['_setCustomVar', 2, 'Time Stamp', tStamp.toString(), 3]);
_gaq.push(['_setCustomVar', 3, 'Source', 'online', 3]);
_gaq.push(['_trackPageview']);
}
Problem: I am not all custom variables getting capture. Only 0.03% of total visits custom variables are captured. that means if have 35000 visits, only 12 visitor ids are captured, instead of capturing all 35000 visitor ids.
In Firefox, i can see following values sent to GA for each time i access my page, but i can few reported.
utme 5(Success*None)
utme 8(Visitor ID*Time Stamp*Source)9(Ravi0408-1210-4aa3-816d-c722203b345c*Tue Apr 08 2014 12:10:48 GMT-0500 (Central Standard Time'1*online)
Try removing the following line from your inline script:
gaq.push(['_trackPageview']);
You have repeated it in your scripts.js file anyway.
You are using anonomised IDs for your visitors I trust?
The trackPageview code is right.
Custom Report to view Page-Level Custom Variable Values
To view Page level custom variables, you'll need to specify explicitly the metric and dimensions, which can be done via the Custom Report (click the Customization tab).
The default dashboard will not show page level custom variable values. Here's a screenshot of my custom report configuration for custom variable of slot 2:

Google Plus button code warns: "Unsafe JavaScript attempt to access frame" in Chrome

I am trying to add a Google Plus button to my site, and keep getting JavaScript safety warnings, despite the fact that I am using Google's recommended code, on Chrome.
I have reproduced the errors with code copied straight from Google Webmaster's recommended code, with no other additions:
<html itemscope itemtype="http://schema.org/">
<head>
<meta itemprop="name" content="Title">
<meta itemprop="description" content="Description">
</head>
<body>
<g:plusone annotation="inline"></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')\[0\]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
Load this in Chrome (15 on Mac), and the developer console warns:
Unsafe JavaScript attempt to access frame with URL http://mydomain.com/
from frame with URL https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2Fmydomain.com%2F&size=standard&count=true&annotation=inline&hl=en-US&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3Dt6mt7PFQYRQ.en_GB.%2Fsv%3D1%2Fam%3D!agWx4Vf_ACSIFA91ZQ%2Fd%3D1%2F#id=I1_1323174311773&parent=http%3A%2F%2Fmydomain.com&rpctoken=352111652&_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe.
Domains, protocols and ports must match.
Is the Google Webmaster recommended code simply unsafe? Or have I done something wrong?
This is a common warning thrown by social plugins. Twitter and Facebook plugins usually throw this warning too. You can safely ignore it.

jQuery works on jsFiddle but not in a live page

THE QUESTION
Interesting one that probably has a simple solution. With the help of #jessegavin I've added a jQuery function to my page that controls the playback of HTML5 audio elements on the page. The code is beautiful and works correctly on a jsFiddle, but not when put into the context of my page.
I've thrown time to the wind and methodically stepped through this to try and isolate my mistake, but with no avail. Really, I went Aristotle on this one and applied the scientific method. Please forgive me for the heft of this question. It's really my last resort.
THE NITTY GRITTY
Here are my findings: All the JavaScript functions for the page work correctly in context of the jsFiddle. After specifically adding the functions one at a time I can say that they each work appropriately, and that all except for the HTML5 audio playback work on both the jsFiddle and the live page. That is to say ONLY the HTML5 audio playback is not working on the live page.
All the HTML is 100% validated, all the CSS is 100% validated. Both groups are code are added into the jsFiddle in their entirety.
The page heading loads (in this order) an external CSS document, jQuery 1.5.1 and jQuery UI 1.8.8 (same on jsFiddle, except for UI, which is 1.8.9) via Google's onload command, an external JavaScript document (where ALL functions for the site reside), and finally a Google Analytics function.
The JavaScript is wrapped in a document ready framework.
My guess is that the discrepancy lies somewhere in the head, but I cant imagine what exactly it is. All the external links work correctly, evidenced by the JavaScript functions working correctly (except for the new audio controller).
THE POST SCRIPT
P.S.- Only works in Chrome and Safari as of yet.. The server I'm hosting the two audio files off of doesn't have the correct ht-access file declaring OGG as a correct MIME type. I'll start a question for that too.
RESOURCES
jsFiddle: http://jsfiddle.net/66FwR/3/
HTML (heading only, body is in jsFiddle)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="description" content="Fernando Garibay- Producer, Songwriter, Artist, Multi-Instrumentalist, and Programmer" />
<meta name="keywords" content="Fernando Garibay, Music, Producer, Songwriter, Artist, Mutli-Instrumentalist, Programmer." />
<title>Fernando Garibay - Music</title>
<link rel="icon" type="image/png" href="http://www.fernandogaribay.com/favicon.ico" />
<link href="../styles/fernando.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAqfg-jHFfaMB9PWES0K_8ChTCwkclEZER8BG2IP57SKkFV1O9hxSZkzKYPDs-3mbhEluKXjbKUAB7sQ"></script>
<script type="text/javascript">
  google.load("jquery", "1.5.1");
  google.load("jqueryui", "1.8.8");
</script>
<script type="text/javascript" src="../scripts/fernando.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-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>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--Copyright 2011, Fernando Garibay, Inc-->
<!--Developed by Minimal +-->
</head>
<body onload="message()">
JavaScript (the function that works on jsFiddle, but not in a live page)
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
I see two JavaScript errors on your live page (in both Chrome and Firefox):
Uncaught TypeError: Object [object Object] has no method 'fancybox'
Uncaught ReferenceError: message is not defined
You reference fancybox() in fernando.js, and message in the <body onload="message()">. Those errors are most likely stopping your audio control code from running.
The URL is http://fiddle.jshell.net/66FwR/3/show/ look at that.
It includes jQuery UI too. You could copy the source and use that.

Google Analytics - Blocks HTML/page rendering

I have used the "Better Google Analytics JavaScript that doesn’t block page downloading" to load Google Analytics dynamically so that it will not block HTML / page rendering.
However, it appears occassionaly that my HTML page will block rendering on the Firefox 3.0 (WinXP) status message states:
"Transferring data from www.google-analytics.com"
Any ideas on how to load the Google Analytics JavaScript in a way in which it will not block HTML/page rending?
You could use Google Analytics [asynchronous loading of tracking codes][1]. The following snippet should help:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-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);
})();
</script>
Put the Google Analytics code as the last thing before the </body> tag, like Google recommends?
You may be seeing this bug. Before 3.6, FF sometimes incorrectly blamed google analytics for slowing down the page...
https://bugzilla.mozilla.org/show_bug.cgi?id=487638
But it at the bottom (just before the </body>) and delay it:
<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript">
if (typeof(_gat)=='object')
setTimeout(function(){
_gat._getTracker("UA-1234567-8")._trackPageview()}, 1500);
</script>
Have a look at my explanation about why I think this is the "best way to integrate analytics".
The DEFER attribute may work for you
<script DEFER type="text/javascript" src="http://www.google-analytics.com/ga.js">
<script DEFER type="text/javascript">... tracker code ...</script>

Categories