Mit der refresh()-Methode der Google Publisher Tags lassen sich neue Anzeigen für die Anzeigenflächen anfordern und anzeigen. Damit das “refreshen” bzw. Aktualisieren korrekt funktioniert, muss vorher schon über die display()-Methode eine Ad angefordert worden sein. Das Aktualisieren an sich kann durch verschiedene Nutzer-Interaktionen getriggert werden. Ein Trigger kann z.B. eine bestimmte Scroll-Tiefe des Nutzers sein. Wie das mit den Google Publisher Tags funktioniert, zeige ich in diesem Beitrag.
Hinweise
Bevor du Anzeigen aktualisierst solltest du vorher die Richtlinien dazu prüfen. Insbesondere müssen solche Ad Slots entsprechend im Google Ad Manager deklariert werden. Beachte zudem, dass ein Refresh die Impressionen erhöht, jedoch negative Auswirkungen auf die Anzeigen-Sichtbarkeit haben kann.
Refresh auf Basis der Scroll-Tiefe
Für die Implementierung erstellen wir ein einfaches HTML. Im HTML gibt es 5 div-Elemente, die je 1.000 Pixel hoch sind, um eine lange Seite fürs Scrolling zu simulieren. Die Anzeige wird innerhalb des ersten div-Blocks platziert, die CSS-Position auf “fixed” gesetzt, damit wir beim Scrollen die Ad auch im Auge behalten können. Zudem kommen noch ein paar Umrandungen für eine bessere Visualisierung bzw. Trennung der Elemente zum Einsatz. Hier das HTML dazu (Codes auch auf meiner GitHub-Seite verfügbar):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<style>
.block {
border: 1px solid;
padding: 0px;
margin: 0px;
height: 1000px;
}
#banner-ad {
position: fixed;
border: 5px solid red;
}
</style>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag
.defineSlot(
'/6355419/Travel/Europe', [300, 250], 'banner-ad')
.addService(googletag.pubads());
googletag.enableServices();
});
</script>
</head>
<body>
<h1>Refresh auf Basis der Scroll-Tiefe</h1>
<div class="block">
<h2>Div 1</h2>
<div id="banner-ad" style="width: 300px; height: 250px;">
<script>
googletag.cmd.push(function() {
googletag.display('banner-ad');
});
</script>
</div>
</div>
<div class="block">
<h2>Div 2</h2>
</div>
<div class="block">
<h2>Div 3</h2>
</div>
<div class="block">
<h2>Div 4</h2>
</div>
<div class="block">
<h2>Div 5</h2>
</div>
</body>
</html>
Nun kommt die JavaScript-Logik für das Refreshen auf Basis der Scroll-Tiefe. Hierzu ist zunächst eine Funktion notwendig, die die vertikale Scroll-Tiefe in Prozent zurückgibt. Das übernimmt die getScrollPercent-Funktion. Die refreshAd-Funktion sorgt dafür, dass die Anzeige aktualisiert wird, indem die refresh()-Methode nach 50 % Scroll-Tiefe ausgeführt wird. Falls du eine andere Scroll-Tiefe nutzen möchtest, dann passe dazu die Variable “adRefreshTrigger” an. Über das onscroll-Event wird die Funktion entsprechend ausgeführt. Hier die fertige Funktion:
<script>
let ap;
let adRefreshTrigger = 50;
function getScrollPercent() {
var r = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
return (r[st]||b[st]) / ((r[sh]||b[sh]) - r.clientHeight) * 100;
};
function refreshAd() {
ap = getScrollPercent();
if (ap >= adRefreshTrigger) {
googletag.cmd.push(function() {
googletag.pubads().refresh();
});
console.log("Ad refreshed");
window.onscroll = null;
}
}
window.onscroll = function(){
refreshAd();
};
</script>
Testing
Um das ganze zu testen, muss im Falle des Beispiel-Codes über 50 % gescrollt werden, um das Refreshing zu sehen. Hier als GIF-Animation:
