CODEWITHSUNDEEP
google-analyticsmodernizryepnope
Adi
Adi

Reputation: 4022

YepNope (Modernizr) and Google Analytics

Im using the great async script loader yepnope.js (in Modernizr2).

My question is, what is the best way to incorporate the latset Google Analtics async code to yepnope (if at all)?

Google suggest this for the actual analytics code:

<html>

<head>
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _gaq.push(['_trackPageview']);
  </script>
</head>

<body>
  <p>Page Content</p>

  <script src="some_random_script.js"></script>

  <p>Page Content</p>

  <script type="text/javascript">  (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>
</body>
</html>

But in Modernizrs docs, they mention this:

// Give Modernizr.load a string, an object, or an array of strings and objects
Modernizr.load([
  // Presentational polyfills
  {
    // Logical list of things we would normally need
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    // Modernizr.load loads css and javascript by default
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  // Functional polyfills
  {
    // This just has to be truthy
    test : Modernizr.websockets && window.JSON,
    // socket-io.js and json2.js
    nope : 'functional-polyfills.js',
    // You can also give arrays of resources to load.
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      // Run this after everything in this group has downloaded
      // and executed, as well everything in all previous groups
      myApp.init();
    }
  },
  // Run your analytics after you've already kicked off all the rest
  // of your app.
  'post-analytics.js'
]);

Note the bottom line re: posting analyics. I dont want a new js file as that is another HTTP request however.

Shall I just keep this outside of yepnope? Is there any advantages to putting it within yepnope framework?

Adi

Upvotes: 4

Views: 2292

Answers (2)

Paolo
Paolo

Reputation: 21136

Not sure if this is "the best way" to incorporate the latest Google Analytics code in yepnope, but a way to integrate google code in yepnope is:

<script type="text/javascript">
Modernizr.load([
  {
    // WEB ANALYTICS loaded by yepnope (beta)
    test: Boolean(SITEID = ''), // TODO: Fill the site ID to activate analytics
    complete: function() {
        if (SITEID) {
            var _gaq=[['_setAccount',SITEID],['_trackPageview']]; 
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        }
    }
  }
]);
</script>

It should be OK to place this code just before the </body> tag.

Upvotes: 0

Malachi
Malachi

Reputation: 33710

I found this on Ignited-HTML5-Boilerplate.

<script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
        load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
</script>

Upvotes: 7

Related Questions