Met Google Analytics meten welke social media je bezoekers gebruiken.

pieMet een klein beetje javascript-code kun je vaststellen op welke social media een site-bezoeker momenteel is ingelogd. Door dit te koppelen aan Google Analytics heb je een extra segmentatiemogelijkheid om het gedrag van websitebezoekers te analyseren. En als je het een stap verder neemt, een prima mogelijkheid om je website verder te optimaliseren.

Hulp bij de installatie nodig? Ik help je graag verder met dit soort website-optimalisatie!

Hoe werkt het?

In Google Analytics heb je toegang tot vijf vrije variabelen om informatie mee te geven over je bezoeker. Dit is handig wanneer je informatie wilt opslaan waar Google nog niet in voorziet. Qua regelgeving mag je van Google geen informatie opslaan die tot individuele personen te herleiden is. Algemene informatie, zoals of een bezoeker wel of niet is ingelogd op je website, is echter geen probleem.

Screenshot van de check in actie.

Screenshot van de check in actie.

Door het opvragen van een special webadres kun je achterhalen of iemand is ingelogd op Facebook, Twitter, Google Plus of Google. Volgens de ‘Social Network Login Status Detector Demo‘ website werkt dit in ieder geval voor Firefox, Chrome, Internet Explorer (>7), Safari en Opera. Door de uitkomsten van deze check via een _gaq.push commando naar Google Analytics te sturen worden ze opgeslagen.

Codevoorbeeld

Plaats deze code in de header van je website (nĂ¡ je Google Analytics fragment):

<script type="text/javascript">
    var loggedInNetworks = '';
    function RecordLoggedIn(status, network){ if (status){ loggedInNetworks += network + '|'; } }
    function PushToAnalytics(){
        if (loggedInNetworks != ''){ 
            loggedInNetworks = loggedInNetworks.substring(0,loggedInNetworks.length -1 );
            _gaq.push(["_setCustomVar", 1, 'Social Network' , loggedInNetworks , 1]);
        }
    }
    function PushWithDelay(){  // Pushing right away was too fast so added a delay.
        setTimeout("PushToAnalytics()", 2000);
    }
</script>

De code is afkomstig van Alex Czartoryski en is enigszins door mij opgeschoond om deze wat compacter te maken. Mocht je in Google Analytics Custom Variable 1 al gebruiken dan kun je _setCustomVar instellen op 2, 3, 4 of 5. Let wel: enkel de eerste 1 (direct na _setCustomVar”,) vervangen!

Vervolgens moet deze code nog ergens in het body-gedeelte van de website worden opgenomen:

<img style="display:none;" onload="RecordLoggedIn(true, 'GOOGLE')" onerror="RecordLoggedIn(false, 'GOOGLE')" src="https://accounts.google.com/CheckCookie?continue=https://www.google.com/intl/en/images/logos/accounts_logo.png" />

<img style="display:none;" onload="RecordLoggedIn(true, 'GPLUS')" onerror="RecordLoggedIn(false, 'GPLUS')" src="https://plus.google.com/up/?continue=https://www.google.com/intl/en/images/logos/accounts_logo.png&type=st&gpsrc=ogpy0" />

<img style="display:none;" onload="RecordLoggedIn(true, 'TWITTER')" onerror="RecordLoggedIn(false, 'TWITTER')" src="https://twitter.com/login?redirect_after_login=%2Fimages%2Fspinner.gif" />

<div id="fb-status-check"></div>
<script type="text/javascript">
    window.fbAsyncInit = function () {
        FB.init({ appId: 'Your-App-Id', status: true, cookie: true, xfbml: true });
        FB.getLoginStatus(function (response) {
            if (response.status != "unknown") { RecordLoggedIn(true, 'FACEBOOK'); }
            else { RecordLoggedIn(false, 'FACEBOOK'); }
        });
    };
    (function () { var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-status-check').appendChild(e); } ());
        function OnLogIn() { }
</script>

<img style="display:none;" onload="PushWithDelay()" src="http://www.yourdomain.com/pixel.png" />

In het bovenstaande stukje moet Your-App-Id vervangen worden. Je krijgt zo’n ID door je als Facebook developer aan te melden en een nieuwe app aan te maken (tutorial). Als je al zo’n ID hebt kun je die natuurlijk gebruiken. Let wel, zonder App-ID werkt de Facebook-meting niet!

Daarnaast moet je http://www.yourdomain.com/pixel.png vervangen door een plaatje op je eigen website. Welke maakt niet uit maar omdat het toch niet getoond wordt zou ik een klein plaatje aanraden. Dat scheelt weer laadtijd. In mijn test van deze code gebruikte ik bijvoorbeeld een RSS-icoon.

Segmenten aanmaken in Google Analytics

Nu de gegevens worden gemeten is nog een laatste stap nodig voor het kunnen gebruiken van de informatie in Google Analytics. Namelijk het aanmaken van een segment. Google heeft een prima tutorial op YouTube geplaatst die je door de stappen heen helpt. Erg krachtige filters, die segmenten:

Zorg dat je bij het selecteren van het groene veld ‘Vrije variabele (Waarde 01)’ kiest en niet ‘Vrije variabele (Sleutel 01)’. Je kunt het later wijzigen maar je gewenste data zal niet naar voren komen als je voor de sleuteloptie kiest. De netwerken worden, gescheiden door een | teken, opgeslagen. Als je dus iedereen die onder andere op Twitter ingelogd is wilt zien dan is dit de goede instelling:

Voorbeeld van een geavanceerd segment.

Voorbeeld van een geavanceerd segment.

Wil je echter gebruikers zien die enkel een Twitter-account hebben waarmee ze zijn ingelogd dan moet ‘bevat’ veranderen in ‘Komt precies overeen’. Op die manier zijn allerlei varianten mogelijk. Bijvoorbeeld wel ingelogd op Facebook en Twitter maar niet op Google Plus.

Installatie gelukt? Iets interessants ontdekt? Deel je ervaringen in de comments!

Auteur:

Datum: 28-05-2013

Goed artikel? Abonneer je net als meer dan 300 vakgenoten op mijn updates!