INFOnline Measurement Manager Integration via Google Tag Manager¶
Bedingungen und Verwendungszweck¶
Der INFOnline Measurement Manager kann mit dem Google Tag Manager integriert werden. Der Google Tag Manager wird verwendet, um Tags auf Ihrer Webseite zu verwalten. Ohne den Code der Webseite direkt zu bearbeiten, verwenden Sie die GTM-Benutzeroberfläche, um Tags wie den INFOnline Measurement Manager hinzuzufügen.
Wir bieten eine optimierte Lösung an, um den INFOnline Measurement Manager nahtlos in den Google Tag Manager zu integrieren, empfehlen aber dennoch, die Standardintegration zu nutzen.
Diese beispielhafte Anleitung erklärt Schritt für Schritt, wie Sie den INFOnline Measurement Manager mit dem Google Tag Manager auf Ihrer Webseite integrieren.
Vorbereitung¶
- Relay-Client-Container (gehostet von INFOnline oder selbst gehostet)
- Registrierter Domain-Service-Name als CNAME (gehostet von INFOnline), AAA(A) (selbst gehostet) DNS-Eintrag
- Angebotskennung, bereitgestellt von INFOnline GmbH
- Google Tag Manager Konto
Einrichten der benötigten Tags in Google Tag Manager¶
Wir werden einen Trigger, drei Variablen und drei Tags im Google Tag Manager erstellen, um den INFOnline Measurement Manager auf Ihrer Webseite zu integrieren. Alle Schritte sind notwendig, um den INFOnline Measurement Manager über den Google Tag Manager zu integrieren. Die Schritte können sich jedoch unterscheiden, je nachdem, wie der Inhalt vom Kunden ausgeliefert wird (mobil oder Desktop). Der gezeigte Weg ist die klassische Implementierung eines Kunden mit einer mobilen sowie einer stationären Webseite und mit der dazugehörigen Site-Definition.
Erstellen Sie eine benutzerdefinierte Variable für den Gerätetyp¶
Klicken Sie in Ihrem Google Tag Manager-Konto auf Variablen
und dann unter Benutzerdefinierte Variablen
auf Neu
, um eine neue Variable zu erstellen. Wählen Sie auf dem Popup-Fenster oben links einen aussagekräftigen Namen für die Variable. Wir empfehlen, Gerät
als Namen zu verwenden. Klicken Sie dann auf Wählen Sie einen Variablentyp, um mit der Einrichtung zu beginnen. Bitte wählen Sie Custom JavaScript und fügen Sie folgenden Code in die Codeeingabe ein:
1 2 3 |
|
Der obige Code gibt den Gerätetyp 'mobile'
(Gerätebreite < 768px) oder 'desktop'
(Gerätebreite>= 768px) entsprechend dem Ergebnis der Medienabfrage zurück. Wenn Sie fertig sind, klicken Sie auf "Speichern".
Achtung
Die Grenze der Geräteunterscheidung zwischen Mobile und Desktop wurde bewusst nach den allgemeinen Spezifikationen des Responsive Design gezogen. Es ist eine Empfehlung, aber der Publisher kann hier auch seinen eigenen Wert verwenden. Er muss sich aber bewusst sein, dass er dann nicht der Norm entspricht.
Achtung
Die Bestimmung des Gerätetyps durch Überprüfung des Ansichtsfensters ist problematisch, da der obige Code auf mobilen Geräten wie Tablets oder Smartphones mit HDR-Unterstützung (z.B. iPad) bei Verwendung im Hochformat den Desktop zurückgibt. Der Kunde muss also entscheiden, ob er alle Arten von Mobilgeräten unterstützen soll. Zudem besteht immer die Möglichkeit, dass es zu einer Fehlanpassung kommt.
Erstellen Sie eine Lookup-Tabellen-Variable für den Domain-Service-Namen¶
Um eine Lookup-Tabellen-Variable für den Domain-Service-Namen der Serviceplattform hinzuzufügen, klicken Sie auf "Variablen" und dann unter "Benutzerdefinierte Variablen" auf "Neu", um eine neue Variable zu erstellen. Auf dem Popup-Schieber oben links wählen Sie einen aussagekräftigen Namen für die Variable. Wir empfehlen, dsn
als Namen zu verwenden. Klicken Sie dann auf Wählen Sie einen Variablentyp, um mit der Einrichtung zu beginnen. Wählen Sie Lookup Table
als Variablentyp und wählen Sie device
als Input Variable. Fügen Sie die folgenden Zeilen mit dem spezifischen Domain-Service-Namen der Serviceplattform (CNAME) für die Eingabe "Mobile" und "Desktop" hinzu und speichern Sie die Einstellung (siehe Screenshot oben für weitere Details).
Input | Output | Example |
---|---|---|
mobile | <mobile domain service name> |
data-acbd18db4c.example.com |
desktop | <desktop domain service name> |
data-dcba15efab.example.com |
Der dsn
wird später im dsn
Makro in allen Tags verwendet.
Erstellen Sie eine Lookup-Tabellen-Variable für den Befragungstyp¶
Um eine Lookup-Tabellen-Variable für den Befragungstyp qds hinzuzufügen, klicken Sie auf "Variablen" und dann unter "Benutzerdefinierte Variablen" auf "Neu", um eine neue Variable zu erstellen. Auf dem Popup-Dia oben links wählen Sie einen aussagekräftigen Namen für die Variable. Wir empfehlen den Namen "sampleType" zu verwenden. Klicken Sie dann auf Wählen Sie einen Variablentyp, um mit der Einrichtung zu beginnen. Bitte wählen Sie Lookup Table
als Variablentyp und wählen Sie device
als Input Variable. Fügen Sie die folgenden Zeilen mit dem "SampleType" für die Eingabe "Mobile" und "Desktop" hinzu und speichern Sie die Einstellung (siehe Screenshot oben für weitere Details).
Input | Output |
---|---|
mobile | mo |
desktop | in |
Erstellen Sie den Tag, um den Measurement Manager zu laden¶
Klicken Sie in Ihrem Google Tag Manager Konto auf "Tags" und dann auf "Neu", um ein neues Tag zu erstellen.
Geben Sie Ihrem Tag einen aussagekräftigen Namen und klicken Sie dann auf "Tag-Konfiguration".
Wählen Sie "Benutzerdefiniertes HTML" aus der Liste.
Nun müssen wir den folgenden Code in den "HTML"-Editor einfügen:
1 2 3 |
|
Info
Das Makro dsn
sollte durch den AAA(A) oder CNAME-DNS-Eintrag der Serviceplattform (Relay-Client) aus der in den obigen Schritten als Variable angegebenen Lookup-Tabelle ersetzt werden.
Es sollte jetzt so aussehen:
Schließlich müssen wir noch einen Trigger hinzufügen, der den Tag beim Laden der Webseite auslöst. Klicken Sie dazu auf den Bereich "Trigger" und wählen Sie den Auslösertyp "Pageview" (Alle Seiten).
Jetzt können wir das erste Tag im Google Tag Manager speichern.
Erstellen Sie den Tag, um die Befehle configure
und pageview
auszulösen¶
Nachdem wir den ersten Tag erstellt haben, um das INFOnline Measurement Manager-Skript zu laden, müssen wir nun einen weiteren Tag erstellen, um die Befehle configure
und pageview
auszuführen.
Wie beim ersten Schritt müssen wir einen neuen Tag erstellen, "Custom HTML" aus der Liste auswählen und den folgenden Code in den "HTML"-Editor einfügen:
1 2 3 4 |
|
Info
Bitte beachten Sie, dass dies nur eine beispielhafte Integration von Befehlen ist. Die vollständige Liste der verfügbaren Befehle und der zugehörigen Parameter finden Sie in der Standardintegration.
So sollte es aussehen:
Schließlich müssen wir noch einen Trigger hinzufügen, der den Tag beim Laden der Webseite auslöst. Klicken Sie dazu auf den Bereich "Trigger" und wählen Sie den Auslösertyp "Pageview" (Alle Seiten).
Jetzt können wir das zweite Tag im Google Tag Manager speichern.
Erstellen Sie den Tag, um das QDS-Modul für die agof ddf zu aktivieren¶
Für die Aktivierung des QDS-Moduls müssen wir ein weiteres Tag erstellen, das durch unseren benutzerdefinierten Trigger "Inhaltsseiten" ausgelöst wird. Wie bei den anderen Tags gehen wir zu Tags
und klicken auf die Schaltfläche New
. Benutzen Sie Custom HTML
als Typ und fügen Sie folgenden Code in die Eingabe ein
1 2 3 |
|
So sollte es aussehen:
Schließlich müssen wir noch einen Trigger hinzufügen, der den Tag beim Laden der Webseite auslöst. Klicken Sie dazu auf den Bereich "Trigger" und wählen Sie den Triggertyp "Pageview" (Alle Seiten).
Veröffentlichen und Einbinden des Google Tag Managers¶
Nachdem wir die beiden Tags zum Laden des INFOnline Measurement Managers und zum Ausführen von Befehlen erstellt, bearbeitet und gespeichert haben, ist es an der Zeit, unseren Container zu veröffentlichen.
Sie müssen den Container jedes Mal veröffentlichen, wenn Sie Änderungen an den Tags vornehmen, damit diese wirksam werden. Klicken Sie dazu auf die Schaltfläche "Veröffentlichen" auf der rechten Seite Ihres Arbeitsbereichs im Google Tag Manager.
Wenn Sie dies noch nicht getan haben, müssen Sie den Google Tag Manager in Ihre Webseite integrieren. Klicken Sie dazu im Google Tag Manager auf die Container-ID (GTM-XXXX) auf der rechten Seite Ihres Arbeitsbereichs. Es erscheint ein Popup mit Code-Snippets und Anweisungen. Bitte folgen Sie den Anweisungen, um die Code-Snippets in Ihre Webseite zu integrieren.
Abweichende Integrationen¶
Die oben beschriebene Integration des Google Tag Managers ist nur beispielhaft. Es gibt noch weitere Möglichkeiten, ihn in Ihre Webseiten zu integrieren, insbesondere durch Trennung oder Verwendung verschiedener Befehle (alle verfügbaren Befehle finden Sie in der Standardintegration).
Bitte beachten Sie, dass Sie in jedem Fall das Bootstrapping-Skript mit dem Google Tag Manager laden müssen, wenn Sie die Webseite laden (wie im ersten Schritt beschrieben). Es lädt die beste Version des INFOnline Measurement Managers für die aktuellen Voraussetzungen und wird daher immer benötigt.
Sie können die Befehle in separate Tags im Google Tag Manager aufteilen oder verschiedene Befehle verwenden.
Anstatt ein einziges Tag für den Befehl configure
und den Befehl pageview
zu verwenden, wie wir es in Schritt zwei getan haben, könnten wir sie in zwei Tags aufteilen, indem wir zwei Custom HTML
-Elemente verwenden - eines für jeden Befehl:
1 2 3 |
|
1 2 3 |
|
Achtung
Bitte beachten Sie, dass der Befehl configure
nur einmal pro Seitenladevorgang ausgeführt werden muss.
Wenn Sie eine Single Page Application haben, bei der Sie die Webseite einmal laden und nachfolgende Änderungen der Ansicht intern vom Framework gehandhabt werden, ohne die Webseite neu zu laden, müssen Sie den Befehl pageview
jedes Mal auslösen, wenn eine neue Ansicht angezeigt wird (Google empfiehlt hierfür den History change trigger
).
Dies gilt nicht für "normale" serverseitig gerenderte Webseiten, bei denen jede Änderung der Ansicht eine neue Anfrage bedeutet. Hier müssen Sie die Befehle configure
und pageview
bei jedem Laden der Webseite auslösen.