Het is dinsdag 8 december en het is weer tijd voor de maandelijkse JUG Eindhoven meeting. Tijdens de vragenronde van de persconferentie over Corona en de niet versoepelde maatregelen stromen de bezoekers binnen in de virtuele omgeving van Google Meet.

Vandaag een geeft Hans Kuijpers een demo hoe je Google Analytics kunt verwerken op je website middels Google Tag Manager. Half acht, we gaan van start!

Google Tag Manager

Met Google Analytics kun je meten hoeveel bezoekers er op jouw site komen. Maar niet alleen dat... je kunt ook meten waar ze vandaan komen, welke pagina's ze bekijken, hoe lang ze op de pagina's blijven en waar ze de pagina verlaten. Meten van deze statistieken kan gedaan worden met het stukje javascript dat door Google Analytics aangeleverd wordt. Daarna zul je met extra code aan de slag moeten gaan om ook gebeurtenissen te kunnen gaan meten. Denk hierbij aan een of meerder van de volgende gebeurtenissen:

  • Klikken op uitgaande links
  • Klikken op link naar e-mail en telefoonnummers
  • Bekijken van videos
  • Beluisteren van audio
  • Bekijken van een formulier
  • Registratie van 404 error

Het registreren van deze gebeurtenissen en het koppelen van je website aan Google Analytics gaat eenvoudiger met Google Tag Manager. 

Wat is Google Tag Manager

Met Google Tag Manager is een stuk gereedschap waarmee je code stukjes beheert. Code stukjes waarmee je jouw website kunt koppelen aan andere meetinstrumenten als Google Analytics, Adwords, Hotjar, LinkedIn Insights en meer. De stukjes code heten Tags en worden uitgevoerd zodra een Trigger dit ok vindt. Je kunt nieuwe tags testen en meten zonder dat andere bezoekers van de website daar hinder van ondervinden. En het is gratis.

Google Tag Manager verwerken op je website

Om Google Tag Manager te verwerken op je website heb je een Google account nodig waarna je aan de slag kunt gaan bij tagmanager.google.com.

  1. Aanmaken van account. Maak per bedrijf waarvoor je Google Tag Manager beheert een eigen account aan. Klik in Google Tag Manager rechtsboven op de knop "Account maken".
    • Account instellen: vul een passende accountnaam en land in.
    • Container instellen: vul een passende containernaam in en selecteer een doelplatform (internet)
      • Tip: voor containernaam kies ik veelal de domeinnaam van de website
  2.  Code toevoegen aan je eigen website. Direct na het aanmaken van account en container verschijnt een popup met twee stukjes code om toe te voegen aan je website. Deze zijn nodig om connectie te leggen tussen jouw website en Google Tag Manager. Elke stukje code bevat een Container ID. 
    • Handmatig toevoegen:
      • kopieer het eerste stukje code en voeg het aan je template toe tussen het block <head></head>.
        (Dit kan via Joomla administrator > Extensies > Templates > Templates > jouw-template > index.php, maar kan ook via je favoriete editor)
      • kopieer het tweede stukje code en voeg het aan je template toe, direct na de start van <body>
    • Vanuit een plugin: 
      • Joomla extension directory kent waarschijnlijk vele plugins die dit kunnen, maar ik gebruik een zelfgemaakte plugin. 
      • Download en installeer https://github.com/perfectwebteam/pwt-gtm
      • Ga naar Joomla Administrator > Extensies > Plugins en zoek naar "PWT GTM"
      • Configureer de plugin met de Google Tag Manager Container ID en activeer de plugin. 
      • De plugin plaatst beide stukjes code

Google Tag Manager is nu geplaatst op je website en daarmee is je website gekoppeld met deze dienst van Google. Het is nu verder aan jou om aan de slag te gaan met het configureren van deze dienst. 

Componenten van Google Tag Manager

Google Tag Manager bestaat uit een viertal belangrijke bouwstenen:

  • Tags: Een tag bestaat uit code die gegevens naar een systeem zoals Google Analytics verzendt.
  • Triggers: Een trigger luistert of een bepaalde gebeurtenis zich voordoet, zoals een klik, een formulier verzenden of een pagina laden.
  • Variabelen: Een variabele is een tijdelijke aanduiding voor een waarde die gewijzigd kan worden, bijvoorbeeld een productnaam, een prijswaarde of een datum.
  • Gegevenslaag: Tag Manager implementeert een gegevenslaag om tijdelijk waarden in de client te bewaren, zodat deze door tags, triggers en variabelen kunnen worden gebruikt.

bron: https://support.google.com/tagmanager/answer/6103657?hl=nl

Configuratie van een tag - Google Analytics

  1. Aanmaken Variabele voor Google Analytics Property id
    1. Ga in GTM naar Variabelen en klik bij "Door de gebruiker gedefinieerde variabelen" op de button "Nieuw"
    2. Wijzig de naam naar "GA Property"
    3. Klik op Variabeleconfiguratie en kies voor type = Lookup-tabel
    4. Wijzig Invoervariabele naar {{Page Hostname}}
    5. Voeg rijen toe en vul in het eerste veld de hostname en tweede veld de Google Analytics ID
      • bijvoorbeeld rij 1: example.com en UA-12345678-1
      • bijvoorbeeld rij 2: www.example.com en UA-12345678-1
      • bijvoorbeeld rij 3: shop.example.com en UA-12345678-2
    6. Klik op opslaan om de wijzigingen te bewaren
  2. Aanmaken Variabele met standaard configuratie van Google Analytics
    1. Ga in GTM naar Variabelen en klik bij "Door de gebruiker gedefinieerde variabelen" op de button "Nieuw"
    2. Wijzig de naam naar "GA Default Settings"
    3. Klik op Variabeleconfiguratie en kies voor type = Instellingen van Google Analytics
    4. Wijzig Tracking-ID naar de zojuist aangemaakte {{GA Property}}
    5. Klik op Meer instellingen > Velden die moeten worden ingesteld
    6. Voeg veld toe en vul veldnaam en waarde in.
      • Veldnaam = anonimizeIp
      • Waarde = true
    7. Klik op opslaan om de wijzigingen te bewaren
  3. Aanmaken Trigger voor Alle pagina's
    De nog aan te maken Tag voor Google Analytics willen we laten uitvoeren op alle pagina's. Deze trigger bestaat, maar is niet zichtbaar in dit overzicht. 
  4. Aanmaken Tag voor Google Analytics
    1. Ga in GTM naar Tags en klik op de button "Nieuw"
    2. Wijzig de naam naar "GA Page View"
    3. Klik op Tagconfiguratie en kies voor type = Google Analytics - Universal Analytics
      Op moment van schrijven is Google Analytics v4 uit en kun je ook kiezen voor een van de twee GA4 tags
    4. Laat Trackingtype ongewijzigd staan op Paginaweergave
    5. Wijzig Google Analytics-instellingen naar de variabele {{GA Default Settings}}
    6. Klik in het vlak bij Triggers en selecteer de trigger Alle pagina's
    7. Klik op opslaan om de wijzigingen te bewaren
  5. Testen van de wijzigingen
    Voordat je de wijzigingen live gaat zetten is het wijs om de wijzigingen te testen. Ze zullen alleen maar voor jou zichtbaar zijn.
    1. Klik bij Werkruimte rechtsboven op de knop Voorbeeld om daarmee de Tag Assistent te starten
    2. Vul de website in waar de tag geladen gaat worden en klik op Start
    3. Een nieuw tabblad opent met daarin jouw website en een kleine popup die de status van de debugger aangeeft
    4. Zodra de Tag Assistant verbonden is zal het eerste tabblad dit aangeven. 
    5. Met de Tag Assistent kun je zien of je site nog net zo blijft werken als voorheen en of de door jouw aangemaakte tags geladen worden op de plaatsen waar jij dat wenst. 
    6. Ben je tevreden met de wijzigingen kun je de Tag Assistent sluiten en keer terug naar het tabblad met het overzicht van de aangemaakte tags
  6. Wijzigingen live zetten
    1. Klik bij Werkruimte rechtsboven op de knop Verzenden om daarmee een nieuwe versie van de gewijzigde tags te maken
    2. Geef een versienummer en korte beschrijving (Toevoegen Google Analytics)
    3. Klik rechtsboven op de knop Publiceren en de website is via Google Tag Manager gekoppeld aan Google Analytics 

Vanaf nu is de website via Google Tag Manager gekoppeld aan Google Analytics

Configuratie van een tag - Outbound clicks

Onderstaande uitleg beschrijft hoe je Google Tag Manager kunt configureren om uitgaande links als Events in Google Analytics weg te schrijven.

  1. Aanmaken van Variabele voor outbound link
    1. Ga in GTM naar Variabelen en klik bij "Door de gebruiker gedefinieerde variabelen" op de button "Nieuw"
    2. Wijzig de naam naar "is outbound link"
    3. Klik op Variabeleconfiguratie en kies voor Type variabele = Pagina-elementen > Variabele voor auto-gebeurtenis
    4. Klik top de dropdown bij Type variabele en kies voor Element-URL
    5. Klik op de nieuw verschenen Componenttype voor is uitgaand
    6. Vul de partnerdomeinen in met de URL van de huidige website en voor alle domeinen die niet uitgaand zijn. 
      De variabele zal TRUE zijn als een link klik niet overeenkomt met een url in deze komma gescheiden lijst
    7. Klik op opslaan om de wijzigingen te bewaren
  2. Aanmaken Trigger voor Outbound link click
    1. Ga in GTM naar Triggers en klik op de button "Nieuw"
    2. Wijzig de naam naar "Event - is outbound link"
    3. Klik op Type Trigger en kies voor type = Klik > Alleen links
    4. Kies bij Deze trigger wordt geactiveerd door de optie = Sommige klikken op links
    5. Kies in de dropdowns voor: 
      • Variabele = is outbound link
      • Vergelijk =  is gelijk aan
      • Waarde = true
    6. Klik op opslaan om de wijzigingen te bewaren 
  3. Aanmaken Tag voor Google Analytics
    1. Ga in GTM naar Tags en klik op de button "Nieuw"
    2. Wijzig de naam naar "GA Event - Outbound link.click"
    3. Klik op Tagconfiguratie en kies voor type = Google Analytics - Universal Analytics
    4. Wijzig Trackingtype naar Gebeurtenis
    5. Vul de nieuw getoonde velden in:
      • Categorie = Outbound link.click
      • Actie = {{Click Hostname}} Dit is een variabele die de hostname van de link wegschrijft
      • Label = {{Click URL}} Dit is een variabele die de URL zelf wegschrijft
      • Waarde = {{Page Path}} Dit is een variabele die de URL van de pagina waarop de link staat wegschrijft
    6. Wijzig Google Analytics-instellingen naar de variabele {{GA Default Settings}}
    7. Klik in het vlak bij Triggers en selecteer de trigger Event - is outbound link
    8. Klik op opslaan om de wijzigingen te bewaren 
  4. Testen van de wijzigingen
    Zoals beschreven bij de configuratie van de tag voor Google Analytics
  5. Wijzigingen live zetten
    Zoals beschreven bij de configuratie van tag voor Google Analytics

Vanaf nu zal in Google Analytics bij Events / Gebeurtenissen 

Configuratie van een tag - de mogelijkheden zijn eindeloos

Naast het aanmaken van een tag om de paginaweergaven te meten in Google Analytics of een tag om de uitgaande link kliks te registreren in Google Analytics zijn er nog vele andere "recepten" mogelijk voor Google Tag Manager. 

Tijdens de JUG040 bijeenkomst werd onderstaande link gedeeld met daarin, volgens eigen zeggen, 40+ recepten. Volg de uitleg bij elk recept hoe je hem kunt importeren in jouw Google Tag Manager

https://www.analyticsmania.com/google-tag-manager-recipes/

Veel plezier ermee

Dr Joomla

vraag: Als ik vanuit MS Word tekst kopieer en plak in Joomla ziet de opmaak er anders uit dan wanneer ik gewoon tekst tik. Hoe komt dat?
antwoord: Met het kopiëren vanuit MS Word worden ook opmaakcodes meegenomen. Bij het plakken in Joomla zullen deze opmaakcodes ook geplakt worden. Om dit te voorkomen hebben de WYSIWYG editors in Joomla (zowel TinyMCE als JCE) de mogelijkheid om de vanuit MS Word gekopieerde content te plakken via de optie "Plakken vanuit MS Word". In JCE is dit een apart klembord icoontje. Deze filtert de opmaakcode van MS Word en plakt platte tekst. 

vraag: Vanwege een bericht dat ergens een website gehackt was en de database openbaar werd de volgende vaag. Is er een mogelijkheid om de via een maatwerk formulier verzonden en in een tabel opgeslagen IBAN nummers te beveiligen met een MD5Hash? EN.... de gebruikers (en admin) moeten de mogelijkheid houden de IBAN in te zien en te wijzigen.
antwoord: Een wachtwoord wordt ook middels een MD5Hash opgeslagen en is te wijzigen... maar is niet in te zien. dat is het mooie van MD5Hash... alleen encrypten en niet decrypten. Wellicht dat de volgende Joomla pagina een oplossing kan bieden: https://api.joomla.org/cms-3/classes/Joomla.CMS.Crypt.Cipher.CryptoCipher.html Verder hebben we op het moment geen oplossing. Wie het wel heeft, mag dit melden in de comments van dit verslag.

vraag: Hoe kan er vanuit Community Builder een userlijst gegenereerd worden met eigen gekozen velden?
antwoord: zie https://extensions.joomla.org/extension/export-users-from-community-builder-to-excel-or-csv-file/ en via de officiële community rondom CB: https://www.joomlapolis.com/documentation/278-community-builder/operations-guide/18836-exporting-users

vraag: Hoe kan ik de resultaten van hobby fotografie geschaald en met watermerk voorzien tonen op de website?
antwoord: integreer je website met de image CDN van Imagekit.io. Dit is ook gedaan voor de nieuwe website van oeteldonk.org. Grote afbeeldingen worden opgeslagen op de website en op gewenste formaat getoond via imagekit.io. Daarbij kan ook een parameter meegezonden worden die een watermerk toevoegt alsmede een watermerk die de focus legt op het gezicht. Leuk speelgoed.  

Volgende keer

De volgende JUG Eindhoven is op maandag 11 januari. De onderwerpen voor deze meeting en de mogelijkheid tot aanmelden is terug te vinden op https://www.joomlacommunity.nl/agenda/joomla-gebruikersgroepen/eindhoven/event/589-jug040-bijeenkomst-eindhoven

Vragen voor Dr. Joomla kun je kwijt als reactie onder de aankondiging.

3 reacties

EasyDiscuss Avatar
Ernst Sangen
De geboden oplossing van de Joomla CryptoCipher API zou kunnen werken.
De eenvoudige kode

use Joomla\CMS\Cryp t\Cipher\Simple Cipher;
$cipher = new SimpleCipher();
$key = $cipher->generateKey( );
$geheimeTekst = 'Dit moet worden omgezet';
$encryptedTekst = $cipher->encrypt( $geheimeTekst, $key);
$decryptedTekst = $cipher->decrypt( $encryptedTekst , $key);

echo '<p>' . 'geheime tekst ' . " -> " . $geheimeTekst . '</p>';
echo '<p>' . 'Key ' . " -> " . print_r($key) . '</p>';
echo '<p>' . 'Encrypted ' . " -> " . $encryptedTekst . '</p>';
echo '<p>' . 'Decrypted ' . " -> " . $decryptedTekst . '</p>';

geeft inderdaad een encrypte tekst op en kan terugvertaald worden.

Echter SimpleCrypto is niet meer veilig en er wordt aangeraden om CrypteCipher te gebruiken. Echter bij het genereren van een key kom ik niet voorbij de foutmelding 'Cannot safely create a key'.

0
EasyDiscuss Avatar
Erik
In de Q&A wordt het advies gegeven Citaat :
integreer je website met de image CDN van Imagekit.io.
. Is er ook een geschikte extensie hiervoor of werkt deze met iedere CDN extensie?

0
EasyDiscuss Avatar
Hans Kuijpers
Geen idee of er een extensie voor bestaat. Ik heb het voor de sites waarin ik het verwerkt heb in een JLayout voor de image verwerkt.
0

Reageer

1000 Resterende tekens