Code examples

Examples of analytics tracking code

Google Analytics

Before:

<script type="text/javascript">
   // <![CDATA[
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-00000000-1']);
   _gaq.push(['_setAllowLinker', true]);
   _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>

After:

<script type="text/plain" class="cc-onconsent-analytics">
   // <![CDATA[
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-00000000-1']);
   _gaq.push(['_setAllowLinker', true]);
   _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>

Woopra

Before:

<!-- Start of Woopra Code -->
<script type="text/javascript">
function woopraReady(tracker) {
    tracker.setDomain('xxxxxxxxx.xxx');
    tracker.setIdleTimeout(300000);
    tracker.track();
    return false;
}
(function() {
    var wsc = document.createElement('script');
    wsc.src = document.location.protocol+'//static.woopra.com/js/woopra.js';
    wsc.type = 'text/javascript';
    wsc.async = true;
    var ssc = document.getElementsByTagName('script')[0];
    ssc.parentNode.insertBefore(wsc, ssc);
})();
</script>
<!-- End of Woopra Code -->

After:

<!-- Start of Woopra Code -->
<script type="text/plain" class="cc-onconsent-analytics">
function woopraReady(tracker) {
    tracker.setDomain('xxxxxxxxx.xxx');
    tracker.setIdleTimeout(300000);
    tracker.track();
    return false;
}
(function() {
    var wsc = document.createElement('script');
    wsc.src = document.location.protocol+'//static.woopra.com/js/woopra.js';
    wsc.type = 'text/javascript';
    wsc.async = true;
    var ssc = document.getElementsByTagName('script')[0];
    ssc.parentNode.insertBefore(wsc, ssc);
})();
</script>
<!-- End of Woopra Code -->

Examples of advertising code

Google Adsense

Before:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-0000000000000000";
/* test */
google_ad_slot = "0000000000";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

After (requires version 1.0.5 or higher):

<script type="text/plain" class="cc-onconsent-inline-advertising"><!--
google_ad_client = "ca-pub-0000000000000000";
/* test */
google_ad_slot = "0000000000";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/plain" class="cc-onconsent-inline-advertising" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Examples of social plugins and widgets

Facebook like button [HTML5 and XFBML]

Before:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=000000000000000";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

After:

<div id="fb-root"></div>
<script type="text/plain" class="cc-onconsent-social">(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=000000000000000";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Facebook like box [HTML5 and XFBML]

Before:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=000000000000000";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

After:

<div id="fb-root"></div>
<script type="text/plain" class="cc-onconsent-social">(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=000000000000000";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Facebook like box [Iframe]

Before:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=true&appId=000000000000000" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>

After:

<script type="text/plain" class="cc-onconsent-social">
  jQuery('#myIframe').html('<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=true&appId=000000000000000" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>');
</script>
<div id="myIframe"></div>

Disqus

Before:

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

After:

<div id="disqus_thread"></div>
<script type="text/plain" class="cc-onconsent-social">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

Add this

Before:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=0000000000000000000"></script>
<!-- AddThis Button END -->

After:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/plain" class="cc-onconsent-social" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=0000000000000000000"></script>
<!-- AddThis Button END -->

Twitter "share a link" button

Before:

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

After:

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script type="text/plain" class="cc-onconsent-social">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Twitter widget

Before:

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
   version: 2,
   type: 'profile',
   rpp: 4,
   interval: 30000,
   width: 250,
   height: 300,
   theme: {
      shell: {
         background: '#333333',
         color: '#ffffff'
      },
      tweets: {
         background: '#000000',
         color: '#ffffff',
         links: '#4aed05'
      }
   },
   features: {
      scrollbar: false,
      loop: false,
      live: false,
      behavior: 'all'
   }
}).render().setUser('example').start();
</script>

After (requires 1.0.5 or higher):

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script type="text/plain" class="cc-onconsent-inline-social" >
new TWTR.Widget({
   version: 2,
   type: 'profile',
   rpp: 4,
   interval: 30000,
   width: 250,
   height: 300,
   theme: {
      shell: {
         background: '#333333',
         color: '#ffffff'
      },
      tweets: {
         background: '#000000',
         color: '#ffffff',
         links: '#4aed05'
      }
   },
   features: {
      scrollbar: false,
      loop: false,
      live: false,
      behavior: 'all'
   }
}).render().setUser('example').start();
</script>