Jak tworzyć elastyczne jednostki reklamowe DFP

Opublikowany: 2016-01-22
Reklamy elastyczne google dfp — przykład tagu podwójnego kliknięcia

Ten post został ostatnio zaktualizowany 31 sierpnia 2021 r

Masz więc responsywny motyw i chcesz przejść z AdSense do Google Ad Manager (GAM). Pierwszą rzeczą, którą widać, jest to, że nie ma bardziej elastycznych jednostek reklamowych, takich jak te, które zwykle można znaleźć w AdSense.

Instrukcje pomocy technicznej Google mogą być nieco trudne lub skomplikowane. Dlatego dzisiaj pokażę Ci, jak sprawić, by kody GAM były responsywne w kilku prostych krokach.

Dostosowanie kodu DFP w celu tworzenia elastycznych reklam Google Ad Manager nie jest łatwym zadaniem.Jeśli nie masz doświadczenia w programowaniu, rozsądniej byłoby, gdyby eksperci zrobili to za Ciebie poprawnie za pierwszym razem.Nie chcesz ryzykować utraty przychodów z reklam!

Jeśli potrzebujesz pomocy , skontaktuj się z nami tutaj.

Zanim zaczniemy, wykonaj następujące czynności:

  1. Skonfiguruj swój ekwipunek. Skonfiguruj wszystkie odpowiednie rozmiary na jednostkę reklamową. Przeczytaj: Najlepsze praktyki integracji Adsense i GAM
  2. Sprawdź nasz samouczek dotyczący generowania wielu tagów Ad Manager tutaj: https://youtu.be/s74dMDzczyc
  3. Teraz utwórz dwa pliki tekstowe i zapisz je. Użyj dobrego edytora tekstu (wolę używać Notepad ++, ponieważ jest darmowy i łatwy w obsłudze).
  4. Zrób jeden na głowę, a drugi na tagi ciała.
  5. Zapisz znaczniki treści.
  6. Otwórz utworzony plik head.txt.

Sprawienie, by head tag był responsywny

Krok 1: Otwórz plik head.txt w Notatniku ++.Najpierw zróbmy to krok po kroku. Twój kod nagłówka będzie wyglądał mniej więcej tak:

<!– Rozpocznij tag GPT –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<skrypt>

tag okna.google = tag okna.google || {cmd: []};

googletag.cmd.push(funkcja() {

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>

<!– Końcowy tag GPT –>

Krok 2: Zaznaczyłem tam fragment kodu:

googletag.cmd.push(funkcja() {

Musisz dodać trochę kodu po podświetlonej linii. Poniżej znajduje się podany kod, który należy dodać. Wklej tyle instancji (kopii), ile odpowiada wybranej przez Ciebie trasie:

  • Liczba map rozmiarów. W razie potrzeby możesz ponownie użyć tej samej mapy rozmiarów w wielu jednostkach reklamowych
  • Liczba posiadanych jednostek reklamowych
  • Liczba jednostek reklamowych, które chcesz ustawić jako elastyczne
var mappingadunitname = googletag.sizeMapping().

dodajRozmiar([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //pulpit

dodajRozmiar([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

dodajRozmiar([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //mobilny

dodajRozmiar([0, 0], [[320, 50], [1, 1]]). //Inny

zbudować();

Krok 3: Zaznaczyłem kolejny fragment kodu.Tak nazywa się mapowanie, które za chwilę przekażemy w jednostce reklamowej. Wolę zrobić to w ten sposób,mappingadunitname , więc dla naszego powyższego przykładu wybieram utworzenie 1 mapy rozmiaru na jednostkę, co oznacza, że ​​będziemy potrzebować 4 jej instancji i umieścić ją po:

googletag.cmd.push(funkcja() {

Krok 4: Po dodaniu mapowania kod nagłówka powinien wyglądać mniej więcej tak:

<!– Rozpocznij tag GPT –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<skrypt>

tag okna.google = tag okna.google || {cmd: []};

googletag.cmd.push(funkcja() {

var mappingheaderad1 = googletag.sizeMapping().

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

dodajRozmiar([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

dodajRozmiar([0, 0], [1, 1]). //Inny

zbudować();

var mappingcontentad1 = googletag.sizeMapping().

dodajRozmiar([992, 0], [[728, 280], [728, 90], [1, 1]]). //pulpit

dodajRozmiar([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablet

dodajRozmiar([320, 0], [[320, 50], [320, 100], [1, 1]]). //mobilny

dodajRozmiar([0, 0], [[320, 50], [1, 1]]). //Inny

zbudować();

var mappingcontentad2 = googletag.sizeMapping().

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

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

dodajRozmiar([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobilny

dodajRozmiar([0, 0], [[300, 250], [1, 1]]). //Inny

zbudować();

var mappingrightrail1 = googletag.sizeMapping().

dodajRozmiar([992, 0], [[300, 250], [1, 1]]). //pulpit

dodajRozmiar([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablet

dodajRozmiar([0, 0], [1, 1]). //Inny

zbudować();

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>

<!– Końcowy tag GPT –>

Krok 5: Teraz ostatni krok: musisz zdefiniować lub przypisać mapowanie rozmiaru dla każdej jednostki reklamowej.Weźmy jedną tutaj, a potem pokażę ci, co dodać i gdzie.

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

.addService(googletag.pubads());

Krok 6: Teraz musisz dodać ten fragment kodu .defineSizeMapping(mappingadunitname)między niebieską i czerwoną częścią powyższego kodu. czyli przed kropką

Ważne jest, aby słowa w nawiasach odpowiadały mapie rozmiarów, którą chcesz dodać w jednostce reklamowej. W naszym przykładzie tutaj, RightRail_Ad1 powinien mieć następujący wygląd:

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

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

Krok 7: dodanie podobnego mapowania dla wszystkich innych jednostek reklamowych da Ci ostateczny kod.

<!– Rozpocznij tag GPT –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<skrypt>

tag okna.google = tag okna.google || {cmd: []};

googletag.cmd.push(funkcja() {

var mappingheaderad1 = googletag.sizeMapping().

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

dodajRozmiar([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

dodajRozmiar([0, 0], [1, 1]). //Inny

zbudować();

var mappingcontentad1 = googletag.sizeMapping().

dodajRozmiar([992, 0], [[728, 280], [728, 90], [1, 1]]). //pulpit

dodajRozmiar([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablet

dodajRozmiar([320, 0], [[320, 50], [320, 100], [1, 1]]). //mobilny

dodajRozmiar([0, 0], [[320, 50], [1, 1]]). //Inny

zbudować();

var mappingcontentad2 = googletag.sizeMapping().

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

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

dodajRozmiar([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobilny

dodajRozmiar([0, 0], [[300, 250], [1, 1]]). //Inny

zbudować();

var mappingrightrail1 = googletag.sizeMapping().

dodajRozmiar([992, 0], [[300, 250], [1, 1]]). //pulpit

dodajRozmiar([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablet

dodajRozmiar([0, 0], [1, 1]). //Inny

zbudować();

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>

<!– Końcowy tag GPT –>

Uwaga: fragmenty kodu zostały podświetlone, aby podkreślić, jaka mapa rozmiarów została użyta w danej jednostce reklamowej.

Krok 8: Teraz spójrzmy na mapowanie rozmiaru:

var mappingcontentad2 = googletag.sizeMapping().

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

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

dodajRozmiar([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobilny

dodajRozmiar([0, 0], [[300, 250], [1, 1]]). //Inny

zbudować();

Kod w kolorze czerwonym określa szerokość i wysokość przeglądarki. Zwykle wysokość nie jest ważna, ponieważ bierze się ją pod uwagę tylko wtedy, gdy mamy równe szerokości dla 2 linii w powyższym kodzie.

Krok 9: Teraz mówimy to w pierwszym wierszu:

  • Jeśli szerokość przeglądarki jest równa lub większa niż 992px, pokaż rozmiary reklam 728×280 lub 728×90 lub 336×280 lub 300×250 lub 1×1

A w ostatnim wierszu mówimy:

  • Jeśli szerokość przeglądarki jest równa lub większa niż 320px, pokaż rozmiary reklam 320×50 lub 320×100 lub 320×200 lub 300×250 lub 1×1

No.s, 992px, 768px i 320px będą działać na większości stron internetowych, ponieważ są zgodne z konwencjonalnymi rozmiarami przeglądarek na komputery, tablety i urządzenia mobilne.

Jeśli jednak masz witrynę internetową z motywem na tablet i telefon komórkowy, możesz zapytać programistę, jaki rozmiar przeglądarki uruchamia przejście motywu, a następnie możesz dodać ten rozmiar zamiast odpowiednio 768 pikseli i 320 pikseli.

Jaka jest Twoja zautomatyzowana strategia przychodów na 2019 rok?

W MonetizeMore pomagamy wydawcom uzyskać większe przychody z istniejących zasobów reklamowych.Jesteśmy wiodącym partnerem wydawniczym Google i dysponujemy pakietem rozwiązań do zarabiania dla wydawców, które pomagają naszym klientom osiągać docelowe przychody i rozwiązywać problemy związane z działalnością reklamową.

Chociaż samodzielne skonfigurowanie elastycznych jednostek reklamowych DFP jest całkowicie możliwe, ważne jest, aby wziąć pod uwagę koszt alternatywny.Czy warto poświęcać czas, który mógłbyś poświęcić na rozwój firmy i ryzykować utratę przychodów z powodu wadliwej konfiguracji?

Jeśli chcesz uzyskać pomoc w konfiguracji elastycznych jednostek reklamowych DFP.Zarejestruj konto Premium w MonetizeMore już dziś!

monetizewięcej zautomatyzowana optymalizacja przychodów

Powiązane lektury:

  • AdSense oferuje elastyczne jednostki reklamowe
  • Najpopularniejsze typy reklam mobilnych w 2016 r
  • Korzyści z przyspieszonych stron mobilnych DoubleClick dla wydawców
  • Jak przygotować wydawców, gdy wydatki na reklamę mobilną przewyższają komputery
  • Doubleclick Now oferuje śledzenie na różnych urządzeniach i reklamy natywne dla reklamodawców i wydawców mobilnych