Lazy Loading Responsive Adsense Ads

Sie haben hart daran gearbeitet, Ihre Website zu optimieren. Sie haben bereits Dinge wie Lazy Loading von Google Maps gemacht und sich gefragt, ob es noch etwas gibt, das Sie tun können. Gibt es zum Beispiel etwas, das wir tun können, um das Laden von Anzeigen zu verbessern? Gute Nachrichten, es gibt einige Dinge, die Sie tun können. Sie können den mobilen Datentarif des Benutzers respektieren, indem Sie Anzeigen nur dann laden, wenn sie wahrscheinlich im Sichtbereich erscheinen. Sie können auch Anzeigen in der richtigen Größe entsprechend dem Bildschirm des Geräts ausliefern. Das wäre nett von Ihnen. Das wäre nicht nur responsiv, sondern auch verantwortungsbewusst.

Das Problem

Die Natur von Google Adsense ist, dass die Anzeigen zusammen mit dem Skript und der Datei automatisch geladen werden: Dies kann das Erscheinen anderer wichtiger Dinge wie Stile, Schriftarten oder anderer Skripte unangemessen verlangsamen.

Darüber hinaus wird die richtige Anzeigengröße nur einmal kurz vor dem Anzeigenladen ermittelt. Das bedeutet, dass die Anzeigengröße gleich bleibt, wenn der Benutzer den Browser vergrößert oder das Tablet dreht, und höchstwahrscheinlich nicht mehr in den Kontext passt.

Die Argumente

• Es gibt viele Faktoren, die Google Adsense für die Monetarisierung berücksichtigt, aber die "Click-Through-Rate" spielt eine große Rolle für den Umsatz. Daher kann die Fokussierung auf Klicks statt nur auf Impressionen langfristig zu höheren Umsätzen führen. Sie können mehr Klicks erzielen, indem Sie Ihre Website für den Benutzer vertrauenswürdig aussehen und sich anfühlen lassen. Dieses Vertrauen können Sie aufbauen, indem Sie priorisieren, welche Teile Ihrer Website zuerst geladen werden. Anzeigen zuerst auszuliefern, anstatt den tatsächlichen Inhalt, für den der Benutzer gekommen ist, ist ein Weg, um Anzeigenklicks und Impressionen zu reduzieren.
• Logischerweise sollte Google Adsense keine Anzeigenansicht verfolgen, wenn die Anzeige nie in den Sichtbereich gelangt. Ich weiß nicht, ob Google Adsense bereits über diese Art von Tracking verfügt, aber da die Technologie JavaScript-basiert ist, haben sie alle Möglichkeiten dazu.
• Es ist üblich, dass Smartphone- und Tablet-Benutzer ständig zwischen Hoch- und Querformat wechseln, bis sie das bequemste gefunden haben. Die Bereitstellung der am besten geeigneten Anzeigengröße für jeden Modus verbessert die Möglichkeit, mehr Klicks zu erzielen.

Die Lösung

Ich habe ein JavaScript-Plugin entwickelt, das hilft. Es hilft beim Lazy Loading der Anzeigen.

Unabhängig davon, wo sich die Anzeige befindet, ob oberhalb oder unterhalb des Sichtbereichs, wird sie nicht geladen, wenn sie nicht sichtbar ist.

Es hilft auch, die Anzeigen neu zu skalieren.

Das Banner wird an bestimmten Breakpoints neu geladen.

JavaScript

Das Plugin selbst ist ein winziger JavaScript-Code, und ich habe zwei Versionen davon erstellt: Vanilla und jQuery. Ich habe es **adsenseLoader** genannt. Sie können die Dateien hier herunterladen.

• adsenseloader.js; keine Abhängigkeiten (IE 9+).
  1,1 KB komprimiert und gzippt.
• jquery.adsenseloader.js; jQuery-Abhängigkeit.
  835 Bytes komprimiert und gzippt.

So initialisieren Sie es.

// vanilla
var instance = new adsenseLoader( '.adsense' ); // accepted argument types: Selector String, Element, NodeList, Array
 
// jQuery
$( '.adsense' ).adsenseLoader();

Sie können es auch anpassen. Die Standardoptionen sind:

var options =
{
    laziness: 1,
    /*
        @int (<=0)
        This sets the laziness of loading the ads: (viewport height) * laziness . For example:
        0 – ad load starts when at the least a tiny part of it gets in the viewport;
        1 – ad load starts when the distance between the ad and the viewport is no more than the height of the viewport;
        2 – 2x viewports, etc.
    */
 
    onLoad: false
    /*
        @bool
        A callback function which is fired when the ad is fully loaded.
        A single argument (object) of the ad element is passed. For example:
        onLoad: function( ad )
        {
            alert( ad.getAttribute( 'data-ad-slot' ) + ' ad is loaded' );
        }
    */
};
 
// vanilla
var instance = new adsenseLoader( '.adsense', options );
 
// jQuery
$( '.adsense' ).adsenseLoader( options );

Darüber hinaus gibt es eine methodische Funktion `destroy`, die wie ihr Name schon sagt: die Anzeige zerstört und das entsprechende DOM-Fragment in den Standardzustand zurückversetzt. Sie können die Funktion sowohl für die gesamte Instanz als auch für einzelne Elemente aufrufen.

// vanilla
var instance = new adsenseLoader( '.adsense', options );
 
instance.destroy();
// or
document.querySelectorAll( '.adsense' )[ 0 ].adsenseLoader( 'destroy' );
 
 
// jQuery
$( '.adsense' ).adsenseLoader( options );
 
$( '.adsense' ).adsenseLoader( 'destroy' );
// or
$( '.adsense' ).eq( 0 ).adsenseLoader( 'destroy' );

Zuletzt können Sie noch einige weitere Optionen ändern, die globale Auswirkungen auf alle Instanzen des Plugins haben. Sie können die Funktion überall aufrufen, aber sie ist so konzipiert, dass sie vor der Erstellung einer Instanz des Plugins verwendet wird. Die Standardoptionen sind:

var options =
{
    scriptUrl: '//#/pagead/js/adsbygoogle.js',
    /*
        @string (url)
        URL for Google Adsense's executive script file
    */
 
    throttle: 250
    /*
        @int (miliseconds)
        This defines how often the plugin should make
        calculations during the processes such as resize
        of a browser's window or viewport scroll.
        250 means that this happens 4 times in a second.
    */
};
 
// vanilla
adsenseLoaderConfig( options );
 
// jQuery
$.adsenseLoaderConfig( options );

HTML

Hier müssen wir den Adsense-Code-Snippet vereinfachen, indem wir nur zwei Parameter belassen und alles in ein Container-Element einfügen.

<div class="adsense">
  
</div>

CSS

Dieser Teil ist für die Steuerung der Anzeigengröße zuständig. Mit CSS definieren wir Breite und Höhe des Container-Elements mit den genauen Abmessungen für die erwartete Anzeige. Mit Hilfe von Media Queries und einem Pseudoelement setzen wir die Anhaltspunkte für das Plugin, das später feststellen kann, wann eine Anzeige neu skaliert/geladen werden soll.

.adsense {
    width: 970px;
    height: 90px;
    display: block;
}
.adsense:before { display: none !important; }
.adsense ins    { width: 100%; height: 100%; display: block; }
 
@media screen and ( max-width: 1024px ) {
    .adsense        { width: 728px; height: 90px; }
    .adsense:before { content: '1024'; }
}
 
@media screen and ( max-width: 800px ) {
    .adsense        { width: 468px; height: 60px; }
    .adsense:before { content: '800'; }
}

/* etc. */

Glücklicherweise ist Adsense selbst in der Lage, die richtige Bannergröße anhand der angegebenen Abmessungen auszuwählen. Die Eigenschaften `width` und `height` für den Selektor `.adsense` bestimmen, was das Pseudoelement erwartet.

Mithilfe von Media Queries und dem Pseudoelement `::before` teilen wir dem Plugin mit, wann es die Anzeige neu laden soll. Der JavaScript-Teil prüft auf Unterschiede bei den `content`-Werten. Eine Anzeige wird automatisch neu geladen, wenn ein Unterschied erkannt wird. Sie können beliebige unterschiedliche Ganzzahlen über die Media Queries hinweg verwenden. In meinen Beispielen habe ich die Werte den Breitenparametern der Media Queries gleichgesetzt, um die Wartung zu erleichtern.

Das Neuskalieren von Bannern ist eine Aufgabe, die sich auf zwei Disziplinen verteilt: CSS ist die Logik und JavaScript die Ausführung.

Demo

Denken Sie daran, dass Sie möglicherweise nicht sehen, dass dies korrekt funktioniert, wenn Sie einen Ad-Blocker verwenden, der AdSense blockiert.

Sehen Sie sich den Pen Lazy-Loading Responsive Adsense Ads von Osvaldas (@osvaldas) auf CodePen an.

Sie sind herzlich eingeladen, das Projekt auf GitHub zu verfolgen und dazu beizutragen.

Mehrere Anzeigen löschen

Hier ist ein schneller Tipp, wie man mehrere unterschiedlich große Anzeigen verwaltet. Nehmen wir an, wir haben zwei Banner: einen im Inhaltsbereich und einen in der Seitenleiste. Wir können jedem unterschiedliche Klassennamen zuweisen.

<div class="adsense adsense--main">...</div>
&nbsp;
<div class="adsense adsense--side">...</div>

Nun können wir gemeinsame Stile für `.adsense` und individuelle Stile für `.adsense--main` und `.adsense--sidebar` definieren, wie folgt:

.adsense{
    display: block;
}
.adsense:before     { display: none !important; }
.adsense ins        { width: 100%; height: 100%; display: block; }
 
.adsense--main      { width: 728px; height: 90px; }
.adsense--side      { width: 336px; height: 280px; }
 
@media screen and ( max-width: 1024px ){
    .adsense--main          { width: 468px; height: 60px; }
    .adsense--main:before   { content: '1024'; }
}
 
@media screen and ( max-width: 800px ){
    .adsense--side          { width: 250px; height: 250px; }
    .adsense--side:before   { content: '800'; }
}

Anzeigenladeanzeige oder Nutzung von onLoad()

Sie können den Ladevorgang auf verschiedene Weise anzeigen: Stellen Sie ein Platzhalterbild bereit, fügen Sie Text, einen Rahmen, einen Hintergrund oder etwas anderes hinzu, das am besten zu Ihrer Designrichtung passt und sichtbar ist, bis die Anzeige geladen ist.

Um zu beginnen, fügen wir ein zusätzliches HTML-Element und einige Stile hinzu, die im Grunde eine Überlagerung mit dem Text "Wird geladen..." über der Anzeige hinzufügen.

<div class="adsense">
  <ins data-ad-client="ca-pub-4676533344420647" data-ad-slot="5741144487"></ins>
  <p class="adsense__loading"><span>Loading&hellip;</span></p>
</div>

.adsense {
    position: relative;
}
    .adsense__loading {
        width: 100%;
        height: 100%;
        background-color: rgba( 255, 255, 255, .9 );
        display: table; /* for vertical centering */
        position: absolute;
        top: 0;
        left: 0;
    }
    .adsense--loaded .adsense__loading { display: none; }
 
        .adsense__loading span {
            text-align: center;
            vertical-align: middle; /* for vertical centering */
            display: table-cell; /* for vertical centering */
        }

Mithilfe der Callback-Funktion `onLoad()` können wir die Klasse `adsense--loaded` hinzufügen, die für das Ausblenden des Elements `.adsense__loading` verantwortlich ist.

// vanilla
var instance = new adsenseLoader( '.adsense',
{
    onLoad: function( ad )
    {
        if( ad.classList )
            ad.classList.add( 'adsense--loaded' ); // IE 10+
        else
            ad.className += ' ' + 'adsense--loaded'; // IE 8-9
    }   
});
 
// jQuery
$( '.adsense' ).adsenseLoader(
{
    onLoad: function( $ad )
    {
        $ad.addClass( 'adsense--loaded' )
    }
});

Vielen Dank fürs Lesen und dafür, dass Sie ein verantwortungsbewusster Webdesigner/Entwickler sind.