Ins Tag mit dem Tagmanager implementieren

Wenn man den Ins Tag von dem Doubleclick Campaign Manager mit dem Tagmanager implementieren möchte, benötigt man ein separates Iframe weil das Iframe welches durch das Script im Ins Tag “document.write” verwendet. Dieses wird nicht unterstützt wenn der Tag nicht direkt beim parsen bereits auf der Seite direkt implementiert wurde.

Zusätzlich bietet der Tagmanager dann noch die Möglichkeit dir Werbung erst zu erzeugen, wenn der jeweilige Besucher der Webseite in den Bereich erreicht in dem die Anzeige erscheinen soll. Das hat den angenehmen effekt, dass das erstmalige Laden der Seite nicht negativ beeinflusst wird. Da am Anfang nur der Relevante teil im sichtbaren Bereich geladen wird.

Der Ins Tag

<ins class="dcmads" style="display: inline-block; width: 300px; height: 250px;" data-dcm-placement="N5859.3392831300X250DISPLAYIMAGE/B21569195.227215587" data-dcm-rendering-mode="iframe" data-dcm-https-only="" data-dcm-resettable-device-id="" data-dcm-app-id=""> <script src="https://www.googletagservices.com/dcm/dcmads.js"></script> </ins>

Wenn Sie den Ins Tag aus dem Campaign Manager herunterladen, sollte dieser die obige Form enthalten. Der “ins- Tag” mit einem inkludierten “script” Teil.

Der Code für den Tagmanager mit dem ins Tag

<script>
var Insiframe = document.createElement('iframe');
Insiframe.setAttribute('style', 'display: inline-block; width: 100%; height: 100%; overflow: auto;');
Insiframe.setAttribute('allowFullScreen', '');
Insiframe.setAttribute('marginwidth', '0');
Insiframe.setAttribute('marginheight', '0');
Insiframe.setAttribute('scrolling', 'no');
Insiframe.setAttribute('frameborder', '0');
document.getElementsByClassName("widget-title heading")[0].appendChild(Insiframe);
var doc = Insiframe.contentWindow.document;
doc.write('<ins class="dcmads" style="display: inline-block; width: 300px; height: 250px;" data-dcm-placement="N5859.3392831300X250DISPLAYIMAGE/B21569195.227215587" data-dcm-rendering-mode="iframe" data-dcm-https-only="" data-dcm-resettable-device-id="" data-dcm-app-id=""> <script src="https://www.googletagservices.com/dcm/dcmads.js">'+'</'+'script>'+'</'+'ins>')
</script>

Der rote Bereich ist der in dem der Ins- Tag vom Tagmanager direkt hinein kopiert wird. Wichtig ist hier das der Tag zwischen den Beiden Hochkommern steht. Der schließende </script> Tag und der </ins> Tag muss am Ende des heruntergeladenen Codes mit den zerstückelten Tags ersetzt werden ‘+'</’+’script>’+'</’+’ins>

Der blaue Bereich ist der in dem das Element auf der Seite ausgewählt wird, unter dem der Werbebanner eingeblendet werde soll. Dieses erfolgt in diesem Beispiel mit Hilfe der Klasse (class). Die Klasse des Elements können Sie auf Ihrer Seite finden in dem Sie diese aufrufen, und auf den Platz wo die Werbung erscheinen soll einen Linksklick machen und untersuchen auswählen. 

Die Klasse in dem obigen Bild ist “post-tags”. Ersetzen Sie im obigen Code einfach widget-title heading mit Ihren Klassen Namen.

Eine weitere Möglichkeit, womit viele Publisher arbeiten ist es, eigene Elemente zum selektieren in den Quellcode einzufügen.

Ins-tag in den Tagmanager einfügen

Als erste benötigen Sie ein Tag vom Typ “benutzerdefiniertes HTML” und anschließend einen Trigger vom Typ “Elementsichtbarkeit” um die Werbung nur zu laden wenn Sie im sichtbaren Bereich ist.

Benutzerdefiniertes HTML im Tagmanager erstellen

  1. Öffnen Sie Ihren Tagmanager
  2. Klicken Sie im linken Menü auf “Tags”
  3. Klicken Sie auf den roten Knopf “Neu”
  4. Klicken Sie auf “Tag- Konfiguration”
  5. Wählen Sie im rechten Menü –> benutzerdefiniertes HTML
  6. Kopieren Sie den Ihren Code aus dem obigen Beispiel hinein
  7. Haken Sie das Feld “document Write unterstützen” an
  8. Benennen Sie Ihren Tag zB. Ins Tag und Position

Ihr Tag sollte nun wie folgt aussehen:

  1. Klicken Sie auf Speichern
  2. Klicken Sie auf Trigger hinzufügen
  3. Klicken Sie auf auf das blaue + Zeichen oben rechts
  4. Klicken Sie auf Trigger Konfiguration
  5. Wählen Sie den Typ “Elementsichtbarkeit” aus
  6. Auswahlmethode ist hier der CSS Selektor
  7. Element Selektor ist derselbe Name wie im eingefügten Code
  8. Klicken Sie anschließend auf speichern

Ihr Trigger sollte in etwa wie folgender aussehen:

Der Element Selektor beginnt mit einem Punkt bei einer Klasse und mit einer Raute bei einer ID. Optional können Sie natürlich auch einfach als Trigger “Fenster Geladen” auswählen.

Bewerten Sie