Zum Inhalt

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

GTM device type variable

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
function() {
  return window.matchMedia("(max-width: 767px)").matches === true ? 'mobile' : 'desktop';
}

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

GTM dsn lookup table

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

GTM sampleType lookup table

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".

Google Tag Manager Integration - Tag Configuration

Wählen Sie "Benutzerdefiniertes HTML" aus der Liste.

Nun müssen wir den folgenden Code in den "HTML"-Editor einfügen:

1
2
3
<script type='text/javascript'>
  !function(e,s,n,t,m,a,c){e.IOMmGlobalObject=n,e.IOMm=e.IOMm||function(){(e.IOMm.q=e.IOMm.q||[]).push(arguments)},e.IOMm.src=t,m=s.createElement("script"),c="noModule"in s.createElement("script")&&!/Edge/.test(e.navigator.userAgent),e.IOMm.esm=c,m.src=c?t.replace("es5","es6"):t.replace("es6","es5"),s.head.appendChild(m)}(window,document,"IOMm","//{{dsn}}/iomm/latest/manager/base/es6/bundle.js");
</script>
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:

Google Tag Manager Integration - HTML Code

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).

Google Tag Manager Integration - Triggering

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
<script type='text/javascript'>
  IOMm('configure', { st: 'foo', dn: '{{dsn}}', mh: 5 });
  IOMm('pageview', { cp: 'bar', co: 'baz' });
</script>
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:

Google Tag Manager Integration - HTML Code

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).

Google Tag Manager Integration - Triggering

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
<script type="text/javascript">
  IOMm('3p', 'qds', '{{sampleType}}');
</script>

So sollte es aussehen:

Google Tag Manager Integration - QDS module activation

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).

Google Tag Manager Integration - Triggering

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.

Google Tag Manager Integration - Code Snippet

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
<script type='text/javascript'>
  IOMm('configure', { st: 'foo', dn: '{{dsn}}', mh: 5 });
</script>
1
2
3
<script type='text/javascript'>
  IOMm('pageview', { cp: 'bar', co: '{{dsn}}' });
</script>
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.


Letztes Update: August 22, 2022