When using Overlay Layout of Google-Custom-Search, no search data is being collected by Google-Analytics

Question

The Solution:

After consulting with Google Support, here is the solution:

Set up the GCS account in admin console @ https://www.google.com/cse
Set up in Analytics the Site Search settings as mentioned above

Use the Async Tracking Code of Analytics (Universal Analytics Code will not work as of May 2014). put it just before the closing tag. like this:

<head>

<!-- Your head tags, etc here -->

<script type="text/javascript">
  var gaq;
  var _gaq = gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-YY']);
  _gaq.push(['_setDomainName', 'yourdoamin.com']);
  _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>
</head>

Put Use the GCS Tracking code you got from the admin console inside the secion

Use Custom call back to render the search box to handle custom attributes like this:

<body>
<script>

var customUIBehaviours = function(){
    //your jQuery Post UI changes to the GCS box may come here
};

var renderSearchElement = function() {
    google.search.cse.element.render({
        div: 'gsd', 
        tag: 'search', 
        attributes:{
            linkTarget:'_self',
            gaQueryParameter: 'q',
            gaCategoryParameter:'',
            noResultsString:'No results.',
            enableAutoComplete: true
        }
    });

};

var myCallback = function() {
    if (document.readyState == 'complete') {
        renderSearchElement();
        customUIBehaviours();
    } else {
        google.setOnLoadCallback(function() {
            renderSearchElement();
            customUIBehaviours();
        });
    }
};

//this will make the GCS render by myCallback
window.__gcse = {
  parsetags: 'explicit',
  callback: myCallback
};


  (function() {
    var cx = 'YOUR GCS CODE HERE';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<div id="gsd" class="gsce-searchBox"></div>
</body>

More information on the GCS V2 is available @ https://developers.google.com/custom-search/docs/element#cse-element

When using Overlay Layout of Google-Custom-Search, no search data is being collected by Google-Analytics

The problem:

The Question:

The Solution: