Code Blender

2. Social
3. Google
4. Google analytics

Example analytics code

Please note Google changes this from time to time so always check the latest tracking info section.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga( 'create', 'CODE', 'URL' );
ga( 'send',   'pageview' );

= codeBlender "analytics", "social/google/analytics"

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  
  ga( 'require', 'cleanUrlTracker', {
      stripQuery          : false,
      queryDimensionIndex : 1,
      indexFilename       : 'index.html',
      trailingSlash       : 'remove'
  });
  
  ga( 'require', 'eventTracker' );
  ga( 'require', 'outboundLinkTracker' );
  ga( 'require', 'urlChangeTracker' );
  
  ga( 'create', 'UA-49976138-4', 'auto' );
  ga( 'send',   'pageview' );
</script>

Installation

Create the following in the data folder : google.yaml, and add the following collection to represent the analytics.

# Analytics
analytics :
    active    : true
    autoTrack : true
    code      : "UA-XXXXXXXX-X"
    url       : "auto"

Multi domain and language

If your site has a domain per language, then you need to provide the collection in each locale file. This can be achieved by changing the google.yaml file to the following :

# Google analytics
analytics :
    active    : true
    autoTrack : true
    code      : "locale"
    url       : "auto"

and adding the code into say en.yml and repeat for each locale on a new domain.

# Google analytics
google :
    analytics :
        code : "UA-85610225-1"

AutoTrack

By default CodeBlender partials are set up to take advantage of Google AutoTrack. Make sure the instructions on this GitHub page are followed to complete the installation.

We make use of the eventTracker functionality on most clickable elements

Social tracking

To track whether a social action has occurred, requires binding to the events from the network, and pushing a social track to analytics.

ga( 'send', 'social', [ socialNetwork ], [ socialAction ], [ socialTarget ], [ fieldsObject ] );

• network = facebook, twitter etc
• socialAction = share, like etc

We ideally want to capture the initial click, listen to the network event and track that the share was successfully done by the user.

Please note the message.send event is deprecated

ga( "send", "social", "facebook", "share_click", b )

FB.Event.subscribe('edge.create', function(targetUrl) {
    try {
        ga( 'send', 'pageview', '/facebook/like/' + targetUrl );
        ga( 'send', 'social',   'facebook', 'like', targetUrl );
    }
    catch ( e ) {}
});

Facebook network events

• Like : edge.create
• Unlike : edge.remove
• Share : message.send Deprecated
• Comment : comment.create
• Comment remove : comment.remove

Twitter network events

• Tweet : twttr.events.bind 'tweet'

Resources Useful websites and tutorials