De vele hulpbronnen voor het leren van HTML en CSS zijn vaak gericht op het bouwen van een website. Dat is niet gek, de talen zijn daar immers voor ontwikkeld, maar helemaal niet handig voor jou als data-analist! Wanneer je meer gevorderde dingen wil gaan meten met de Piwik Pro Tag Manager, dan zul je al snel aanlopen tegen de kennis die je nodig hebt van HTML en CSS, om slim triggers in te stellen.
In deze tutorial gaan we leren wat jij moet weten over HTML en CSS om goed webstatistieken te kunnen meten!
- HTML-code van een webpagina
- CSS voor HTML pagina’s
- Elementen uniek identificeren met behulp van CSS
- Broncode opvragen op de pagina
HTML code van een webpagina
Als je ooit een webpagina hebt gezien, dan zul je zien dat alle webpagina’s op dezelfde manier zijn opgebouwd. Tip: druk eens op F12 om te zien hoe de broncode van deze website eruit ziet!
Screenshot van HTML code in Firefox
Screenshot van HTML code in Google Chrome
Wanneer je het scherm bekijkt zie je dat het er ongeveer zo uit ziet, in Firefox en in Google Chrome.
Een HTML pagina bestaat uit een aantal HTML-tags (niet te verwarren met Piwik Pro-tags). Zo’n tag begint met een < teken en eindigt met een > teken. In het voorbeeld zien we <HTML> geselecteerd. Alles wat binnen <HTML en > staat zijn parameters die bij die tag horen. Voor nu negeren we deze even.
Wat we verder zien is dat elke webpagina is opgebouwd uit dit schema:
<html>
<head>
</head>
<body>
</body>
</html>
Wat we hierover moeten weten is dat de Piwik -tag te vinden is in het <head> gedeelte van de broncode. En alles wat je op de website kunt zien, te vinden is in het <body> gedeelte van de broncode. Voor meer informatie over de opbouw van een website kun je hier kijken.
We hebben nu geleerd dat iedere website bestaat uit HTML-tags en dat de voor ons belangrijke tags te vinden zijn in het <body> gedeelte van de website.
Belangrijke HTML tags voor data-analytics
Naast de body tags zijn er nog een aantal belangrijke tags voor data-analytics. Hier een overzicht:
<div>
<ul> en <li>
<nav>
<span>
<a>
<p>
<H1>, <H2>, … , <H6>
De HTML-tag die wij het vaakst tegenkomen is het <div> tag. Deze zie je ook terug in de broncode van www.swink.nl. De reden dat <div> tags zo vaak gebruikt worden is omdat webprogrammeurs hiermee een website in stukken kunnen ‘dividen’ (verdelen). Erg handig voor ons wanneer we een specifiek deel van de website willen meten!
Hier nog een stukje uit onze broncode. Het <div> element heeft een parameter ‘class’ gekregen. Dit is een CSS parameter, waar we later verder op in gaan.
De tags <ul> en <li> zijn bedoeld om lijsten mee te laten zien op een website. Wanneer je dit tegenkomt, dan gaat het dus vaak om een opsomming of soms om een lijstje met linkjes.
De tag <nav> is bedoeld voor een navigatiebalk ofwel een menu met linkjes.
De tag <span> lijkt heel erg op het <div> element, maar heeft een iets andere toepassing. Deze kan net als het <div> element gebruikt worden om een website in stukken in te delen.
<a>, <p>, <b>, <i>, <u> en <H1> zijn tags die de tekst op een webpagina vorm geven. <b>, <i> en <u> zijn het eenvoudigst. Deze zorgen ervoor dat tekst Dik, schuin of onderstreept is. Alles tussen <a> en </a> is een linkje naar een andere webpagina. Verder is tekst vaak in paragrafen opgebouwd, te herkennen aan <p> en </p>. En kopjes krijgen meestal de tag <H1> mee.
Wanneer je aan de slag gaat met het bekijken van elementen in de broncode, dan zul je merken dat je soms de gekste toepassingen tegen komt voor HTML-tags. Dus vaar niet blind op de tag en wat hij zou moeten doen. Gelukkig is er ook een manier om het stuk op de website dat je zelf kunt zien, terug te vinden in de broncode. Dat laat ik verderop in dit blog zien.
CSS voor HTML pagina’s
CSS is bedoeld voor de opmaak van webpagina’s, maar data-analisten hebben net wat andere stukken nodig dan webbouwers en webredacteuren. Dit maakt het vaak moeilijk om op een snelle manier de juiste informatie te vinden. Omdat de taal niet gericht is op analisten, dat zie je hier ook weer.
In het vorige hoofdstuk hebben we gekeken naar HTML tags, daar viel op dat sommige een class meekregen.
In CSS worden classes en id’s meegegeven aan HTML-tags om deze een bepaald uiterlijk te geven. In CSS ziet dat er zoiets uit:
Wat voor ons belangrijk is. is dat je tussen de div en ‘wpb_wrapper’ een punt ziet staan. Dit geeft aan dat ‘wpb_wrapper’ een class is van div. In het geval van een ID is dit een hekje (div#idnaam).
In dit blog wordt niet uitgelegd hoe Tags en Triggers worden ingesteld in Piwik, maar dat blog zal binnenkort wel verschijnen! Geef je op voor de nieuwsbrief om op de hoogte te blijven over de nieuwe blogs!
Een element identificeren voor het meten van clicks
Om te meten hoe vaak er op een specifiek element geklikt wordt, moet je deze uniek identificeren in de Piwik Pro Tag Manager. Dit wil je graag meten, aangezien clicks niet altijd leiden tot een nieuwe pageview en dus een eigen meting mee moeten krijgen.
In de Tag Manager heb ik nu een trigger aangemaakt met als triggertype click.
In deze trigger geef ik aan dat hij alleen moet afgaan wanneer er aan bepaalde voorwaarden is voldaan. We gaan hier instellen dat er alleen een trigger moet afgaan wanneer een specifiek element is aangeklikt! Dit kan op een aantal manieren. Met een Click ID, Click Class en het Click Element:
De termen ID en Class herkennen we nu uit CSS. Deze zijn de meest eenvoudige manier om een specifiek HTML-element (dat is een element met een HTML tag) te identificeren.
Voor het meten van onderstaande class kun je de volgende instelling gebruiken.
Deze class kun je meten met onderstaande instellingen:
Voor het meten van onderstaand ID kun je de volgende instelling gebruiken:
Deze ID kun je meten met onderstaande instellingen:
Let wel op wanneer er meerdere HTML-elementen dezelfde class of hetzelfde ID hebben. Want dan zal een click op elk van deze elementen een trigger afvuren. Soms wil je dus een element specifiek kunnen identificeren. Hier zijn een aantal methoden voor. In de volgende paragraaf laat ik die zien.
Het uniek identificeren van click elementen
Met een beetje geluk hoef je de programmeurs van de website niet in te schakelen om een specifiek element te identificeren. Je kunt namelijk een van de onderstaande manieren gebruiken om een element te vinden op de webpagina.
- Het element herkennen aan de attributen van de HTML tag.
- Het element herkennen aan de plek in de hiërarchie op de website.
1. Het element herkennen aan de attributen van de HTML tag
Soms heeft een HTML tag een aantal unieke attributen, waardoor deze herkenbaar is. Een voorbeeld van een HTML tag is:
Het attribuut ‘forward-send‘ is in dit geval iets wat bedacht is door programmeurs en wat wordt gebruikt om de links naar de onderwerpenpagina op vragen. Dit komt ons mooi uit, want dit geeft ons de mogelijkheid om deze uniek te identificeren.
De instelling hiervoor is:
2. Het element herkennen aan de plek in de hiërarchie op de website
Soms heeft een HTML tag geen uniek te identificeren attribuut. Bijvoorbeeld:
In dit voorbeeld willen we het blok <div> meten, met daarin de tekst ‘Doe mee!’. Deze heeft de lay-out van alle zelfde soort blokken op de webpagina, dus uniek identificeren gaat hier niet op basis van de classnaam.
Wat we wel kunnen doen is de hiërarchie gebruiken. De <div class = ‘multi-selector_size’> wordt de ‘parent’ (ouder) genoemd van het dieper gelegen ‘child’ (kind) element <div class = ‘general_link_layout’>Doe mee!</div>. Dit kunnen we tot ons voordeel gebruiken!
Om dit te meten gebruiken we twee voorwaarden:
Het vinden van de juiste broncode met behulp van de browser
‘Maar hoe weet ik nu welk element ik moet hebben?’
Nu je al deze informatie hebt en snapt, wil je weten waar je nou moet beginnen. Ten eerste moet je weten welke knop, menu-item of ander pagina-object je wilt gaan meten. Daarna heb je hiervan de broncode nodig. Voor dit laatste is er gelukkig een hulpmiddel! In de meeste browsers zit een handige tool om jouw knop of menu te vinden in de broncode. In dit voorbeeld ga ik uit van Firefox en van Chrome.
Wanneer je weer op F12 klikt, opent zich opnieuw de broncode van deze pagina. Ga nu op zoek naar het volgende tekentje: 
Deze staat bij beide browsers linksboven in het broncode-scherm.
Wanneer je hier op klikt zie je dat de manier hoe de webbrowser reageert op je muis verandert. Je kunt nu een element selecteren, aanklikken en dan zul je automatisch worden gewezen op het stukje broncode dat bij dat element hoort!
Zie hier een voorbeeld van onze voorpagina, swink.nl:
wordt bij selectie dit:
Wanneer ik hier op klik, word ik doorverwezen naar dit stukje HTML-code.
Dit kun je ook op jouw website toepassen, om dat element te vinden dat jij nodig hebt!
En nu aan de slag!
Zit jouw oplossing hier niet tussen? Of heb je nog vragen? Neem gerust contact met ons op, dan kunnen we je zeker verder helpen!
