So erstellen Sie responsive DFP-Anzeigenblöcke

Veröffentlicht: 2016-01-22

Responsive Google DFP-Anzeigen – Doubleclick-Tag-Beispiel

Dieser Beitrag wurde zuletzt am 31. August 2021 aktualisiert

Sie haben also ein responsives Design und möchten nun von AdSense zu Google Ad Manager (GAM) wechseln. Als Erstes sehen Sie, dass es keine responsiven Anzeigenblöcke mehr gibt, wie Sie sie normalerweise in AdSense finden.

Die Support-Anweisungen von Google können etwas knifflig oder kompliziert sein. Deshalb zeige ich Ihnen heute, wie Sie GAM-Codes in wenigen einfachen Schritten responsive machen können.

Das Anpassen des DFP-Codes zum Erstellen von responsiven Google Ad Manager-Anzeigen ist keine leichte Aufgabe.Wenn Sie keine Programmiererfahrung haben, wäre es klüger, die Experten dies beim ersten Mal richtig für Sie tun zu lassen.Sie wollen nicht riskieren, Ihre Werbeeinnahmen zu verlieren!

Wenn Sie Hilfe benötigen , kontaktieren Sie uns hier.

Bevor wir beginnen, stellen Sie sicher, dass Sie Folgendes tun:

Richten Sie Ihr Inventar ein. Konfigurieren Sie alle relevanten Größen pro Anzeigenblock. Lesen Sie: Best Practices für die Adsense- und GAM-Integration
Sehen Sie sich hier unsere Anleitung zum Generieren mehrerer Ad Manager-Tags an: https://youtu.be/s74dMDzczyc
Erstellen Sie nun zwei Textdateien und speichern Sie diese. Verwenden Sie einen guten Texteditor (ich bevorzuge Notepad++, weil es kostenlos und einfach zu bedienen ist).
Machen Sie einen für den Kopf und einen anderen für Body-Tags.
Speichern Sie die Body-Tags.
Öffnen Sie die Datei head.txt, die Sie erstellt haben.

Den Head-Tag responsiv machen

Schritt 1: Öffnen Sie die head.txt in Notepad++.Zuerst machen wir es Schritt für Schritt. Ihr Header-Code sieht in etwa so aus:

<!– GPT-Tag starten –>

window.googletag = window.googletag || {Befehl: []};

googletag.cmd.push(Funktion() {

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– GPT-Tag beenden –>

Schritt 2: Ich habe dort ein Stück Code hervorgehoben:

googletag.cmd.push(Funktion() {

Sie müssen nach der hervorgehobenen Zeile ein wenig Code hinzufügen. Unten ist der angegebene Code, den Sie hinzufügen müssen. Fügen Sie so viele Instanzen (Kopien) davon ein, wie es der von Ihnen gewählten Route entspricht:

Die Anzahl der Größenkarten. Falls zutreffend, können Sie dieselbe Größenkarte für mehrere Anzeigenblöcke wiederverwenden
Die Anzahl Ihrer Anzeigenblöcke
Die Anzahl der Anzeigenblöcke, die Sie responsiv machen möchten

var mappingadunitname = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //Desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //Tablette

addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //Handy, Mobiltelefon

addSize([0, 0], [[320, 50], [1, 1]]). //andere

bauen();

Schritt 3: Ich habe ein weiteres Stück Code hervorgehoben.Dies ist der Name der Zuordnung, die wir gleich im Anzeigenblock weitergeben werden. Ich ziehe es vor, es so zu machen,mappenadunitname , also entscheide ich mich für unser obiges Beispiel dafür, 1 Größenkarte pro Einheit zu erstellen, was bedeutet, dass wir 4 Instanzen davon benötigen und sie danach platzieren:

googletag.cmd.push(Funktion() {

Schritt 4: Nachdem Sie die Zuordnung hinzugefügt haben, sollte Ihr Header-Code in etwa so aussehen:

<!– GPT-Tag starten –>

window.googletag = window.googletag || {Befehl: []};

googletag.cmd.push(Funktion() {

var Mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //Desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //Tablette

addSize([0, 0], [1, 1]). //andere

bauen();

var Mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //Desktop

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //Tablette

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //Handy, Mobiltelefon

addSize([0, 0], [[320, 50], [1, 1]]). //andere

bauen();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //Desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //Tablette

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //Handy, Mobiltelefon

addSize([0, 0], [[300, 250], [1, 1]]). //andere

bauen();

var Mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //Desktop

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //Tablette

addSize([0, 0], [1, 1]). //andere

bauen();

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– GPT-Tag beenden –>

Schritt 5: Jetzt ein letzter Schritt: Sie müssen die Größenzuordnung für jeden der Anzeigenblöcke definieren oder zuweisen.Lassen Sie uns hier eins nehmen und dann zeige ich Ihnen, was Sie wo hinzufügen müssen.

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

Schritt 6: Jetzt müssen Sie diesen Codeabschnitt .defineSizeMapping(mappingadunitname)zwischen dem blauen und dem roten Teil des obigen Codes einfügen. dh vor dem Punkt

Wichtig dabei ist, dass die Wörter in Klammern mit der Größentabelle übereinstimmen, die Sie in den Anzeigenblock einfügen möchten. Für unser Beispiel hier sollte RightRail_Ad1 dieses Aussehen haben:

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

Schritt 7: Durch Hinzufügen einer ähnlichen Zuordnung für alle anderen Anzeigenblöcke erhalten Sie Ihren endgültigen Code.

<!– GPT-Tag starten –>

window.googletag = window.googletag || {Befehl: []};

googletag.cmd.push(Funktion() {

var Mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //Desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //Tablette

addSize([0, 0], [1, 1]). //andere

bauen();

var Mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //Desktop

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //Tablette

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //Handy, Mobiltelefon

addSize([0, 0], [[320, 50], [1, 1]]). //andere

bauen();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //Desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //Tablette

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //Handy, Mobiltelefon

addSize([0, 0], [[300, 250], [1, 1]]). //andere

bauen();

var Mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //Desktop

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //Tablette

addSize([0, 0], [1, 1]). //andere

bauen();

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.defineSizeMapping(mappingheaderad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.defineSizeMapping(mappingcontentad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.defineSizeMapping(mappingcontentad2).addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– GPT-Tag beenden –>

Hinweis: Teile des Codes sind hervorgehoben, um hervorzuheben, welche Size Map für welchen Anzeigenblock verwendet wurde.

Schritt 8: Schauen wir uns nun die Größenzuordnung an:

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //Desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //Tablette

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //Handy, Mobiltelefon

addSize([0, 0], [[300, 250], [1, 1]]). //andere

bauen();

Der rote Code definiert die Breite und Höhe des Browsers. Normalerweise ist die Höhe nicht wichtig, da sie nur in Betracht kommt, wenn wir im obigen Code gleiche Breiten für 2 Zeilen haben.

Schritt 9: Jetzt sagen wir das in der ersten Zeile:

Wenn die Breite des Browsers gleich oder größer als 992 Pixel ist, zeigen Sie bitte Anzeigengrößen von 728 × 280 oder 728 × 90 oder 336 × 280 oder 300 × 250 oder 1 × 1 an

Und in der letzten Zeile sagen wir:

Wenn die Breite des Browsers gleich oder größer als 320 Pixel ist, zeigen Sie bitte Anzeigengrößen von 320 × 50 oder 320 × 100 oder 320 × 200 oder 300 × 250 oder 1 × 1 an

Die Nummern 992px, 768px und 320px funktionieren für die meisten Websites, da sie den herkömmlichen Größen von Desktop-, Tablet- und mobilen Browsern folgen.

Wenn Sie jedoch eine Website mit einem Tablet- und Mobildesign haben, können Sie Ihren Entwickler fragen, welche Browsergröße der Designwechsel auslöst, und dann können Sie diese Größe anstelle von 768 Pixel bzw. 320 Pixel hinzufügen.

Was ist Ihre programmatische Umsatzstrategie für 2019?

Bei MonetizeMore helfen wir Publishern, mehr Einnahmen aus ihrem bestehenden Anzeigeninventar zu erzielen.Wir sind ein führender Google-Publishing-Partner und verfügen über eine Reihe von Monetarisierungslösungen für Publisher, die unseren Kunden helfen, ihre Umsatzziele zu erreichen und ihre Probleme mit dem Anzeigenbetrieb zu lösen.

Obwohl es durchaus möglich ist, responsive DFP-Anzeigenblöcke selbst einzurichten, ist es wichtig, Ihre Opportunitätskosten zu berücksichtigen.Lohnt es sich, die Zeit aufzuwenden, die Sie für das Wachstum Ihres Unternehmens aufwenden könnten, und riskieren Sie Umsatzeinbußen durch eine fehlerhafte Einrichtung?

Wenn Sie Hilfe beim Einrichten von responsiven DFP-Anzeigenblöcken erhalten möchten.Melden Sie sich noch heute für ein Premium-Konto bei MonetizeMore an!

Verwandte liest:

AdSense bietet responsive Anzeigenblöcke
Die besten mobilen Anzeigentypen für 2016
Die Vorteile der Accelerated Mobile Pages von Doubleclick für Publisher
Wie man Publisher fit macht, wenn die Ausgaben für mobile Werbung Desktop übertreffen
Doubleclick bietet jetzt geräteübergreifendes Tracking und native Werbung für mobile Werbetreibende und Publisher