Gal Samuel Gal Samuel - 1 month ago 10
Javascript Question

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

I have a Google Custom Search Element on my site configured to use the "Overlay Layout":

The layout settings

And I have a Google Analytics Profile conneced to this Google Custom Search account set under the relevant section like this:

The Analytics link settings

I'm using the default Analytics code, and the Custom Search code Google vended.
Analytics "Site Search Tracking" is On at the "Reporting Views Settings" like this:

Google Analytics Views Settings

The problem:



No site search information is being collected by Analytics, even after several days.
This problem is only happening when I use the overlay Layout.
When I use a separate search results page, the query is being collected ok since the results page request is being recorded by Analytics.

With the overlay layout, the search results are being presented in an overlay Div and the query is going only through Google's Custom Search API.

The Question:



What can I do to make sure Analytics gets the keyword query?
Is there any callbak I'm missing?
Is there any thing else I'm missing?

Answer

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