Vraag:
Op mijn website maak ik gebruik van de Advanced Ads plugin om advertenties van Google Adsense in te laden. Met de inkomsten van deze advertenties en de samenwerkingen met andere bedrijven betaal ik de kosten voor de hosting, domein en plugins die ik gebruik.
Nou viel mij op dat er soms advertentieruimtes op mijn site leeg blijven. Je ziet dan in de sidebar een wit leeg vierkantje of in mijn blogs een witte lege banner.
Dat kan de volgende redenen hebben:
- Iemand heeft de cookies nog niet geaccepteerd
- Iemand heeft de cookies niet geaccepteerd
- Iemand heeft een add-on geïnstalleerd die Google Adsense blokkeert
- Google Adsense heeft geen geschikte advertenties
- Als een blog net gepubliceerd is zijn er vaak nog geen advertenties
Ik was benieuwd of ik een oplossing kon bedenken die de witte lege vlakken kan vullen met een afbeelding. Dat ziet er veel mooier uit. Daarnaast kan ik op die manier de ruimte gebruiken om handmatig reclame te maken voor andere websites, diensten of producten.
Antwoord:
Ik had gisteren wat tijd over dus heb ik onderstaand JS script geschreven. Dit heb ik toegevoegd aan een JS bestand van mijn child theme.
Maak je gebruik van een cache plugin zoals WP Rocket? Vergeet dan niet op “clear cache” te klikken.
Ik heb de afbeelding vervangen met een # omdat die anders ingeladen wordt.
setTimeout(function(){ checkIfAdsAreFilled(); }, 2000); function checkIfAdsAreFilled() { const elements = document.querySelectorAll('.adsbygoogle'); Array.from(elements).forEach((element, index) => { if (!element.innerHTML) { const width = element.offsetWidth; if (width <= 200) { // Sidebar: element.innerHTML = '<img style="width: 190px; height: auto;" src="#" />'; } else { // Content: element.innerHTML = '<img style="width: 100%; height: auto;" src="#" />'; } } }); }
Toelichting:
- Het script wordt 2 seconden na laden uitgevoerd zodat hij zeker weet dat de advertentieruimtes leeg zijn. De advertenties worden extern geladen wat voor vertraging kan zorgen.
- De Google Adsense advertenties worden in een <div> met de de class naam “.adsbygoogle” ingeladen
- Met JS functie querySelectorAll zoek ik alle vermeldingen van “.adsbygoogle” op
- Met een foreach lus check ik alle resultaten of ze geen HTML bevatten
- Is de breedte minder dan 200px dan is het een sidebar advertentie
- Afhankelijk van de breedte laad ik een afbeelding in
Natuurlijk kan de afbeelding ook vervangen worden door:
- Plain tekst of opgemaakte HTML tekst
- JS code
- Het inladen van een extern PHP bestand
Huidige toepassing op Timdehoog.nl:
Op dit moment heb ik bovenstaande JS code aangepast zodat er een PHP bestand wordt ingeladen. Dit PHP bestand registreert vervolgens in een database hoe vaak de betreffende advertentieruimte geen advertentie toont. Deze informatie is interessant om te kunnen bepalen welke content ik in de lege vakken kan plaatsen zodat deze zo relevant mogelijk is.