Google Analytics Dashboard van deconf.com is een eenvoudige en gratis extensie om snel de meest belangrijke gegevens van G.A. in je Joomla-backend te zien. Er zijn weinig configuratie-mogelijkheden om het naar je smaak aan te passen, maar het is een aanvaardbaar compromis vanwege de zero-kost.

Uit de praktijk blijkt ook dat auteurs en anderen die in het CMS werken het sterk waarderen dat ze zonder moeite een idee krijgen van de bezoeken op de site.

Het dashboard kan al naargelang de configuratie er als volgt uitzien:

GA Dashboard 1

GA Dashboard 2

Installatie

De hier besproken versie is gedownload op september 2016 maar blijkt identiek aan die van oktober 2015.

In de JED wordt de extensie besproken onder http://extensions.joomla.org/extensions/extension/site-management/analytics/google-analytics-dashboard
Download de extensie.

DownloadMessage mod ga dash UNZIPFIRST

Als dit downloadbestand een naam heeft waarin UNZIPFIRST voorkomt, dan zal je het zip-bestand eerst moeten ontzippen | decompresseren.

Eenmaal dat gedaan zal je merken dat het oorspronkelijk zip-bestand meerdere kleinere zip-bestanden bevatte. Op september 2016 bevatte de gedownloade zip namelijk verschillende versies van de extensies aangepast aan Joomla! versies 1, 2 en 3.

mod ga dash UNZIPped

In de Joomla!Administrator installeer je de extensie door het juiste zip-bestand te selecteren.

Installeren mod ga dashboard

De installatie beperkt zich tot een module voor de backend, het Beheergedeelte. Op het einde van dit artikel vertellen we je hoe je ze ook in de frontend kunt krijgen.

Configuratie API

Allicht zal er al 1 ongepubliceerde module klaar staan in Module Beheer. Open deze en zet de positie op Controlepaneel (cPanel), dit is het breedste gedeelte waarin het dashboard goed zal inpassen; verander de status op Gepubliceerd.

Het moeilijkste deel van de installatie behelst het verlenen van (data)toegang zodat deze extensie de gegevens van Google Analytics kan & mag ophalen.
De uitleg in de video van de extensie-bouwer lijkt verouderd, de link is niet meer geldig maar googelen naar "Google API Projects" leidt nog wel naar de juiste Google URL. Verdwaald in de developers documentatie voor API-keys heb ik wel ontdekt dat er meerdere versies gebruikt worden, onthoud dat deze API werkt met OAuth 2.0 .

Vergewis je eerst van het Google-account dat zou moeten overeenstemmen met de Google Analytics-code die op jouw site geïmplementeerd is. Als de gebruikte methode de aloude & goede Google Analytics is, dan zal deze code beginnen met UA- gevolgd door 2 getallen (alles gescheiden door een minus-teken) waarvan het eerste getal het hoofd-ID of (hoofd)account is en het laatste (klein) getal de sub-account of de "property" zoals het in Google Analytics heet. Met het gepaste Google-account & paswoord zal je je moeten inloggen.

Inloggen voor het beheer van API’s voor Google gebeurt via https://console.developers.google.com/ of https://console.developers.google.com/iam-admin/projects  (links te vinden bij het googlen op “google api project” en vermijd links die beginnen met "code". Want die leiden naar de documentatie voor developers).

GoogleAPI Manager Library 0

Verifieer of je met de juiste Google-account ingelogd bent; dit herken je aan de naam/het logo in de rechterbovenhoek. Daar is de optie om naar een ander Google-account te schakelen indien nodig.

Verifieer dan of je al een Project gecreëerd hebt. Zonder Project kan je geen API-toegangssleutel vragen. Het creëren van een Project behelst in ieder geval niet veel: enkel een naam, eventueel de juiste tijdszone instellen (via Advanced options) en  klaar is kees.

GoogleAPI ProjectCreate

Dit doe je in je IAM & Admin menu. Hoe daar geraken? Open het menu linksboven en bemerk daar de mogelijke menu-opties waaruit je kiezen moet.

GoogleAPI menu

In het geopende admin scherm kies je All projects en daar kan je het benodigde Project creëren.

GoogleAPI IAM Admin AllProjects

Eenmaal een project beschikbaar, selecteer je dit en ga je naar het menu voor het beheer van de APIs.

GoogleAPI API Manager menu

In de Library kies je de juiste API, namelijk die voor Analytics.

GoogleAPI Manager Library

Zonder de zoekfunctie te gebruiken (waarin je geen schrijffouten mag maken) kan je hem ook vinden in het lijstje helemaal onderaan rechts:

GoogleAPI Manager AnayticsAPI step2 b

Bevestig dan je bedoeling door op Enable te klikken.

GoogleAPI Manager AnayticsAPI step1

De API is geactiveerd maar moet nog een toegangssleutel toegewezen krijgen.
Klik daarvoor op Go to Credentials.

GoogleAPI Manager AnayticsAPI step2

In het volgende scherm zal je moeten kiezen om een API(toegangs)sleutel te creëren.
Klik daarvoor op API key zoals aangeduid op onderstaande figuur.

GoogleAPI Manager AnayticsAPI step3 Credentials

Kies daarin voor de creatie van de API-key.

GoogleAPI Manager AnayticsAPI step4 Credential API

Geef het Project een naam. Dit hoeft niet per se de extensie-naam zijn omdat je (naar ik vermoed) deze sleutel nog in andere extensies zou kunnen gebruiken.
Je kan extra beveiliging op je sleutel leggen, bijvoorbeeld door de URLs te specificeren. Dit heb ik niet gedaan en zo is het mogelijk dat ik toch productie-cijfers zie staan in een GA-Dashboard-extensie die niet in de productie-site staat, maar wel in een Joomla!-backend waarin ik wel vaak werk. Alzo heb ik zicht op trafiek van sites waarop ik niet per se ingelogd hoef te zijn. Zeer handig!
Bevestigen door de knop Create en na een paar seconden wordt de sleutel in een pop-up window getoond.

GoogleAPI Manager AnayticsAPI step5 Credential API

Kopieer de sleutel om ze in de GA-Dashboard module in te plakken. Client ID of Client Secret kan je blanco laten.

mod ga dashboard Geavanceerd

 

Bewaar de module en kijk dan naar je Controlepaneel voor het resultaat .

Controlepaneel GADashboard GetAccessCode

Je ziet nog geen dashboard maar je bent er bijna.

Klik (of Control klik) op de link voor Get Access Code en die leidt je naar een klassiek scherm voor toelating:

Controlepaneel GADashboard GetAccessCode Toestaan

Hier moet je uiteraard kiezen voor Toestaan waarna een (lange) toelatings-code, Access Code, zal getoond worden. Deze zal je wederom moeten kopiëren en plakken in het veld van GA Dashboard op je controlepaneel. (In de afbeelding hieronder is de Access Code grijs gemaakt.)

Controlepaneel GADashboard GetAccessCode invullen

Als laatste stap klik je op Save Access Code en na een paar tellen toont de GA Dashboard de beknopte statistieken, cijfers over je bezoekers.

Configuratie GA Dashboard

Voor de presentatie van het dashboard kan je kiezen in al of niet tonen van

  • Geo Map: een wereldkaart waar de plaats van surfers gevisualiseerd worden
  • Traffic Overview: belangrijkste cijfers over de bezoekers (wederkerend, nieuw, via welk kanaal) inclusief taartdiagram
  • Top Pages: meest gelezen paginas
  • Top Referrers: van welke 5 domeinen de meeste gebruikers afkomstig zijn
  • Top Searches: meest gebruikte zoektermen waarmee bezoekers op je site landen

mod ga dash Module setting 1

De instellingen die in de figuur hierboven te zien zijn, resulteren in het dashboard zoals getoond in het begin van dit artikel.

Speel maar met deze settings waarbij je snel het resultaat kunt verifiëren in het ControlePaneel.

Dashboard in front-end

Deze module is oorspronkelijk enkel voor de backend, het beheergedeelte, bestemd. Blijkt dat er site-eigenaars zijn die dit dashboard ook in de front-end beschikbaar willen stellen (bijv. voor auteurs die vooral in de front-end werken).
Hieronder leggen we uit hoe je dit kan doen. Weet je een slimmere manier vertel het ons!

We gaan een apart installatiebestand maken voor de front-end, uiteraard gebaseerd op het bestaande backend installatiebestand.

Unzip het installatiebestand van de backend (in deze test was dit mod_ga_dash_joomla_3x.zip) naar een aparte folder, apart omdat we die folder nadien terug zullen comprimeren naar een apart installatiebestand. Die finale zip moet een andere naam krijgen (zodat je 2 installatiebestanden te odnerscheiden zijn).

In die gedecompresseerde bestanden zullen we een kleine wijziging doen. Het bestand dat bij de installatie aan Joomla! vertelt wat er nodig is voor installatie, welke bestanden er gebruikt worden, draagt de naam van de extensie zelf; hier is dat mod_ga_dash.xml.
Voor ons doeleinde hoeven we enkel de bestemming te wijzigen en dit gebeurt door de waarde toegekend aan client te wijzigen van “administrator” naar “site”. Dus in mod_ga_dash.xml zal één van de eerste lijnen veranderen van:
       <extension    type="module" version="3.0"    client="administrator" method="upgrade">
naar
       <extension    type="module" version="3.0"    client="site" method="upgrade">

Er is voor deze eenvoudige exensie niets méér nodig om te zeggen dat de module voor de front-end is.

Er zijn 2 manieren om het nu te installeren voor front-end.

  1. Je kan je de inhoud van deze nieuwe folder naar de folder mysite/ modules/mod_ga_dash kopiëren en dan in backend bij het Extensiebeheer een “Ontdek” van nieuwe installaties te doen.
  2. We kiezen in onze test voor een iets veiligere en gemakkelijkere oplossing. Comprimeer de mappen terug tot een zip-bestand, zorg dat deze een aparte naam (eender welke) heeft om deze niet te verwarren met het origineel bestand. Deze zip kan je installeren zoals je het deed bij het oorspronkelijk zip-bestand.

Als je G.A. Dashboard al eerder geïnstalleerd had voor het Beheergedeelte - de backoffice van je site -, dan kan je daarvan de identificatie/sleutel-code kopiëren om ze te hergebruiken in de module voor de front-end. Je moet niet de hele versleutel-procedure in Google APIs doorlopen.
Idem dito voor de boodschap “Get access code”, deze zou niet meer verschijnen.

Hoe je de extensie die een module is, ten volle in een pagina in de front-end kunt tonen, laat ik aan jou over (op een bestaande positie van je template voor een bepaalde pagina, in een artikel de module-positie oproepen en het artikel in je menu beschikbaar zetten, gebruikmakend van een module-manager zoals Modules Anywhere, ...).

Het zou kunnen dat de visualisaties hier anders is dan deze in backend door de specifieke CSS van je front-end.

Wat we niet uitgetest hebben is hoe deze extensie voor front-end zal reageren als er een nieuwe versie beschikbaar is. Blijkbaar is er geen geïntegreerde check op nieuwe versies en zal je dus zelf van tijd tot tijd naar de site van de ontwikkelaar moeten surfen. Vergeet dan niet om na de update van backend ook de nodige veranderingen aan te brengen in het XML-bestand en dan een update voor de front-end te doen.

 

Tekst: Manu Ampe
Medetester: Piet Verhoeven