INFOnline Measurement Manager Integration über Google Tag Manager

1 Bedingungen und Verwendungszweck

Der INFOnline Measurement Manager (Web) kann mit dem Google Tag Manager integriert werden. Der Google Tag Manager wird verwendet, um Tags auf Ihrer Website zu verwalten. Ohne den Code der Website direkt zu bearbeiten, verwenden Sie die GTM-Benutzeroberfläche, um Tags wie den INFOnline Measurement Manager (Web) hinzuzufügen.

Wir bieten eine optimierte Lösung an, um den INFOnline Measurement Manager (Web) nahtlos in den Google Tag Manager zu integrieren, während wir weiterhin empfehlen, die Standardintegration für den Measurement Manager zu verwenden.

In dieser beispielhaften Anleitung wird nun Schritt für Schritt erklärt, wie Sie den INFOnline Measurement Manager mit dem Google Tag Manager auf Ihrer Website integrieren.

2 Voraussetzungen

  • 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 zur Verfügung gestellt von INFOnline GmbH
  • Google Tag Manager Konto

3 Einrichten von Tags in Google Tag Manager

Wir werden einen Trigger, eine Variable und drei Tags im Google Tag Manager erstellen, um den INFOnline Measurement Manager (Web) auf Ihrer Website zu integrieren. Alle Schritte sind notwendig, um den INFOnline Measurement Manager (Web) über den Google Tag Manager zu integrieren.

3.1 Erstellen Sie eine konstante Variable für den Namen des Domain-Service-Namen

Dieser Ansatz funktioniert nur, wenn Sie eine Website haben, die nur einen Domain-Service-Namen verwendet. Falls eine Unterscheidung zwischen mobil und stationär/Desktop gemacht werden muss (mit zwei verschiedenen Domain-Service-Namen), müssen Sie die **erweiterte** Anleitung befolgen.

Um eine konstante Variable für den Domain-Service-Namen der Serviceplattform hinzuzufügen, klicken Sie bitte 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 Choose a variable type to begin setup.

Bitte wählen Sie als Variablentyp Konstante und als Wert den Domain-Service-Namen der Serviceplattform (CNAME) und klicken Sie auf Speichern.
Das dsn wird später im dsn Makro in allen Tags verwendet.

3.2 Erstellen Sie das Tag zum Laden des Managers

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 Configuration“.

Sie müssen „Custom HTML“ aus der Liste auswählen.
Nun müssen wir den folgenden Code in den „HTML“-Editor einfügen:

<script type='text/javascript'>
!function(e,t,n,o,m,s,c,a,i){
    e.IOMmGlobalObject=n,e.IOMm=e.IOMm||function(){(e.IOMm.q=e.IOMm.q||]).push(arguments)},
    e.IOMm.src=o,
    m=t.createElement("script"),
    a=t.querySelector('meta[name="iomm_config_esm"]'),
    c="noModule "in m&&!/Edge/.test(e.navigator.userAgent),
    c=(!a||!a.content||"es5"!==a.content)&&c,
    e.IOMm.esm=c,m.src=c?o.replace("es5", "es6"):o.replace("es6", "es5"),
    m.setAttribute("crossorigin", "anonymous"),
    (i=t.querySelector('meta[name="iomm_config_loading"]'))&&i.content&&m.setAttribute(i.content,i.content),
    t.head.appendChild(m)
}
(window,document, "IOMm","//{{dsn}}/iomm/latest/manager/base/es6/bundle.js");
</script>

Das Makro dsn wird automatisch durch den AAA(A) oder CNAME DNS-Eintrag der Service-Plattform (Relay-Client) aus der im obigen Schritt angegebenen konstanten Variable dsn ersetzt.

Es sollte jetzt so aussehen:

Schließlich müssen wir noch einen Auslöser hinzufügen, der den Tag beim Laden der Website auslöst. Klicken Sie dazu auf den Bereich „Auslöser“ und wählen Sie den Auslösertyp „Seitenansicht“ (Alle Seiten).

Jetzt können wir das erste Tag im Google Tag Manager speichern.

3.3 Erstellen Sie das Tag zur Ausführung des Befehls configure & pageview

Nachdem wir das erste Tag erstellt haben, um das INFOnline Measurement Manager (Web)-Skript zu laden, müssen wir nun ein weiteres 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:

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

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 für den Measurement Manager.

So sollte es jetzt aussehen:

Schließlich müssen wir noch einen Auslöser hinzufügen, der den Tag beim Laden der Website auslöst. Klicken Sie dazu auf den Bereich „Auslöser“ und wählen Sie den Auslösertyp „Seitenansicht“ (Alle Seiten).

Jetzt können wir das zweite Tag im Google Tag Manager speichern.

4 Veröffentlichung und Integration des Google Tag Managers

Nachdem wir die beiden Tags zum Laden des INFOnline Measurement Manager (Web) 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 auf Ihrer Website integrieren. Dazu klicken Sie bitte auf die Container-ID (GTM-XXXX) auf der rechten Seite Ihres Arbeitsbereichs im Google Tag Manager. Es erscheint ein Popup mit Code-Snippets und Anweisungen. Bitte folgen Sie den Anweisungen, um die Code-Snippets in Ihre Website zu integrieren.

Google Tag Manager Integration – Codeausschnitt

5 Verschiedene Formen der Integration

Die oben beschriebene Integration des Google Tag Managers ist nur beispielhaft. Es gibt noch weitere Möglichkeiten, ihn in Ihre Websites zu integrieren, insbesondere durch Trennung oder Verwendung verschiedener Befehle (alle verfügbaren Befehle finden Sie im Guide für die Standardintegration des Measurement Managers).

Bitte beachten Sie, dass Sie in jedem Fall das Bootstrapping-Skript mit dem Google Tag Manager beim Laden der Website laden müssen (beschrieben im ersten Schritt). Es lädt die beste Version des INFOnline Measurement Manager (Web) für den aktuellen Wettbewerb 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 die Befehle configure und pageview zu verwenden, wie wir es in Schritt zwei getan haben, können wir die beiden Tags in zwei Custom HTML-Elemente aufteilen – eines für jeden Befehl:

<script type='text/javascript'>
  IOMm('configure', { st: 'foo' dn: '{{dsn}}' });
</script>


<script type='text/javascript'>
  IOMm('pageview', { cp: 'bar', co: 'baz' });
</script>

Bitte beachten Sie, dass der Befehl `configure` nur einmal pro Seitenaufruf ausgeführt werden muss.

Wenn Sie eine Single Page Application haben, bei der Sie die Website einmal laden und nachfolgende Änderungen der Ansicht intern vom Framework verarbeitet werden, ohne die Website 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 Websites, bei denen jede Änderung der Ansicht eine neue Anforderung bedeutet. Dort müssen Sie immer noch die Befehle „Konfigurieren“ und „Seitenansicht“ bei jedem Laden der Website auslösen.