2012-06-03

Using Google-Analytics in Blogger

I got a little frustrated yesterday trying to implement the tracking-code in this blog. There is a neat instruction on the analytics page telling you to paste the script just above the closing Head-tag (</head>). Thats no problem at all, but after I did that and hit the Analytics-page reload the page told me that I wasn't being tracked. There also is a timestamp thats displaying a comforting "just now"-time, but it always said that no data is received. Pardon my lack of precise names for I use the german interface, but in the configuration of blogger there also is a "Web-Property ID from Google Analytics" (Configurations -> Miscellaneous) where I put the Tracking-ID from Google Analytics (now that those names differ is not great either). I got the same unpleasant results. After that I looked up the code in my other blog and thus moved it in this blog right above the closing Body-tag (</body>), which was consistent with all the outdatet documentation.

In the new code-spot I found this:
  <b:include data='blog' name='google-analytics'/>
</body>
Which let me to believe, that my template is one of those, where the configured Tracking-ID should work (its not intended to work with all of them), because it seems that the tracking-code gets included here anyway and me postig it could only lead to errors. Then I just reverted the whole thing and pasted the code above </head> as intended by the Analytics-people. Still no data, though. Then I went to mad to sleep. In the next morning the Analytics-page told me that everything is fine and the data is being received.

So TL; DR: Just post the code where you are told and leave it be. Do not expect Analytics to be able to tell if its working right away, but sleep over it.

Addendum:
I tried to just put in thr Tracking-ID in the supposed field and guess what? It works fine. The line from above is changed into the commonly known:
<script type='text/javascript'>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-32361340-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = (document.location.protocol == 'https:' ?
                  'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
      })();
    </script>
So take a look at the source of your blog and use the field in the configuration if the code is already there.

2012-06-02

Code in Blogger

To post code in Blogger I integrated SyntaxHighlighter based on a post of CraftyFella. I think it looks great and has just the right ease to use. For example check out how it leaves out the line numbers and gutter upon code-selection. However I am not a fan of its fondness for vertical scrollbars where they are not needed. So I added the following snipped to the blogger stylesheet to supress those.
.syntaxhighlighter{
  /* padding top/bottom 1em & left/right no padding */
  padding: 1em 0;
}
Put that within the area that keeps the CSS. Directly beneath the Heading "Content" for example.

Without it your code-blocks will look like this:
  /* 
    the vertical scrollbar looks silly, doesn't it? 
  */
On a side-note I would like to recommend reading the SyntaxHighlighter Configuration-Page which is short and helpful. I used the "class"-feature to switch the vertical-scrollbar back on by setting padding to zero. I particularly like the highlight-feature. You may also want to turn off the upper right attributation-questionmark with "toolbar:false".