Google analytics en site search

Gregor · Post by **Gregor** » Wed Mar 15, 2017 9:23 pm

Dank je Velden. Weet dat het veel tijd kost

Ga verder puzzelen.

Gregor · Post by **Gregor** » Thu Mar 16, 2017 5:29 am

Het werkt

Hoe opgelost?
Account bij Google Analytics nodig https://analytics.google.com

Code van GA in een template 'analytics' geplaatst:

Code: Select all

{literal}
<__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','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-xxxxxxxx-x', 'auto');
  ga('send', 'pageview');
  ga('set', 'anonymizeIp', true);

</__script>
{/literal}

Vervolgens bij Google CSE http://www.google.com/cse/ de code aangemaakt. Belangrijk is hier in het tabblad het uiterlijk te wijzigen naar 'alleen resultaten'. Verder wijzen de instellingen min-of-meer voor zichzelf. Haal de code op en plaats deze in een template (GCB). In mijn geval 'google_zoek':

Code: Select all

{literal}
<__script__>
  (function() {
    var cx = 'partner-pub-xxxxxxxxxxxxxxxxxx:xxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</__script>
<gcse:searchresults-only></gcse:searchresults-only>
{/literal}

Maak een UDT aan waarin het zoekformulier komt te staan, in mijn geval 'google_result':

Code: Select all

echo '
<form id="zoekForm" action="zoeken.html" enctype="multipart/form-data" method="get" target="_self">
  <input id="search" name="q" value="" class="zoek-input" type="text">
  <button type="submit" title="zoek op" class="button"><span>zoek op</span></button>
</form>
</br>
</br>
';

Tot een contentpagina aangemaakt, html uitzetten. In mijn geval heet de pagina alias 'zoeken'.

Code: Select all

<p>Type uw zoekwoord in en gebruik Google om de website te doorzoeken:</p>

{google_result}

{global_content|strip name='google_zoek'}

Het resultaat is te zien op http://www.uisge-beatha.eu/zoeken

Het opmaken van de zoekpagina en hoe de resultaten worden weergegeven, dat moet ik nog uitzoeken hoe dat te doen.

Dank voor jullie hulp tot zover!

Gregor · Post by **Gregor** » Thu Mar 16, 2017 5:33 am

@Arnoud, onderstaand de opgeschoonde code die je in github stuurde:

Code: Select all

<!DOCTYPE HTML>
<__html>

<head>
  <title>Search</title>
</head>

</__body>

<h1>About:</h1>

Send an event to Google Analytics when a url is changed via the History API

<h1>Test:</h1>
<input type="text" name="search" id="js_input"><button id="js_button">Search</button>

<h1>Documentation:</h1>

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">History API implementation</a></li>
<li><a href="http://caniuse.com/#feat=history">Browser support</a></li>
<li><a href="https://github.com/browserstate/history.js/">Polyfill for older browsers</a></li>
<li><a href="https://developers.google.com/analytics/devguides/collection/analyticsjs/events">Google Analytics Documentation</a></li>
</ul>

<__script__ id="jsbin-source-html" type="text/html"></__script>

<__body>  

<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></__script>
<__script__ src="http://browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js"></__script>


<!-- load google analytics -->

<__script__>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-3361592-1']);
  _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>


<!-- implementation -->

<__script__>
(function(window,undefined){
    var History = window.History;
    var $ = window.jQuery;
    var document = window.document;
    if ( !History.enabled ) {
        return false;
    }
    $(function() {
        var $window = $(window);
        var rootUrl = History.getRootUrl();
        var obj = {};
        // statechange instead of popstate
        $window.bind('statechange',function() {
            // History.getState() instead of event.state
            var State = History.getState();
            var rootUrl = History.getRootUrl();
            var url = State.url;
            var relativeUrl = url.replace(rootUrl,'');
            // google analytics event call on url statechange
            ga('send', 'event', 'Search', 'click', 'Search words', obj.value, { 
                nonInteraction: true 
            });
        });
        $("#js_button").click(function() {
            var js_input = $('#js_input').val().trim();
            if (js_input) {
                obj.value = js_input;
                var State = History.getState();
                var url = State.url;
                History.pushState(obj, "search", "?search=" + js_input);
            }
        });
    });
})(window);
</__script>

</__html>

CMS Made Simple Forums

Google analytics en site search

Re: Google analytics en site search

Re: Google analytics en site search

Re: Google analytics en site search