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

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

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

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

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

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

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

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

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

<script type="text/javascript">
  IOMm('3p', 'qds', '{{sampleType}}');
</script>

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

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

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.