Google Tag Manager

de en

matelso Call Tracking in Google Tag Manager /snippet/

June 7, 2019

Mit Hilfe eines einfachen Custom Template Tags zu einem sauberen Setup.

Matelso ist der deutsche Marktführer im Online-Call-Tracking. Besonders B2B-Unternehmen lieben es, eingehende Anrufe zu messen.

Eine typische Anforderung ist natürlich die Einbettung der matelso JS-Bibliothek, die den Zauber entfaltet, Standardtelefonnummern auf einer Website durch die aus großen Tracking-Pools zu ersetzen.

Heutzutage ist dies wirklich einfach, da Ihnen lediglich eine generische Bibliotheks-URL zur Verfügung gestellt wird, die ohne weitere Konfiguration auf der Seite der Web-Eigenschaft einfach aufgerufen werden kann.

Der traditionelle Weg

In der Vergangenheit hätten viele Leute einfach ein winziges Matelso in einen Custom HTML-Tag kopiert und das war's. Für manche Situationen wird dies jedoch nicht ausreichen. Scrollen Sie im nächsten Abschnitt nach unten zum Shopware-Vorteil, um zu verstehen, warum.

Jetzt haben wir benutzerdefinierte Template-Tags

Wenn Sie jedoch vorhaben, dieses ganze Durcheinander mit Custom HTML mit dem neuen Template-System von GTM zu bereinigen, macht matelso es Ihnen sehr einfach, wie Sie dies tun können. Wir werden nur ein Eingabefeld für die Skript-URL und einige Codezeilen definieren.

Info

Felder

Code

const copyFromWindow = require('copyFromWindow');
const injectScript = require('injectScript');

const CallTrackingObject = 'mtls';

if(copyFromWindow(CallTrackingObject)) {
  // matelso already loaded
  data.gtmOnFailure();
}

injectScript(data.LibraryUrl, data.gtmOnSuccess, data.gtmOnFailure, CallTrackingObject);

Erlaubnis

Das war's. Speichern Sie diese Vorlage und verwenden Sie Ihren brandneuen matelso Custom Tag.

Besonderer Vorteil für Shopware und ähnliche XHR-Sites

Es gibt Situationen, in denen es eine Frage des Timings ist, wann oder wie oft Matelso zu feuern ist. Ein solcher Fall ist Shopware 5 und seine Einkaufswelten. Sie sind Ajax geladen.

Es kann also vorkommen, dass Sie Telefonnummern in der Kopf- oder Fusszeile, d.h. beim Laden des Fensters, und in einer Einkaufswelt haben, die nach dem Fensterladeereignis (oder Seitenansicht/dom ready) verfügbar werden könnten.

Ein einfaches Matelso-Tracking-Snippet im Kopf kann diese Aufgabe nicht erledigen. Es wird Ihnen nicht gelingen, Telefonnummern innerhalb der Einkaufswelten zu ersetzen.

Daher müssen wir warten, bis die Einkaufswelten geladen sind, bevor wir das Matelso abfeuern können. Gerne stellt Shopware dafür über jQuery eine Pub/Sub-Veranstaltung zur Verfügung. Was aber, wenn ein solches Ereignis nie eintritt, weil wir uns z.B. auf einer CMS-Seite ohne Einkaufswelten befinden?

Wir brauchen einen Fallback-Trigger, vielleicht einen Timer, der solche Situationen auffängt. Letztendlich müssen wir in diesem Szenario mindestens zweimal Matelso abfeuern (einmal Laden der Einkaufswelten und dann nach einem Fallback-Timer). Aber wir wollen unser DOM nicht mit diesen ungeschickten Skriptknoten aufblähen, die jedes Mal hinzugefügt werden, wenn ein benutzerdefinierter HTML-Tag abgefeuert wird.

Das ist unser Vorteil mit dem Code der benutzerdefinierten Vorlage. Wir blähen das DOM nie auf. Stattdessen prüfen wir jedes Mal, wenn der Tag ausgeführt wird, ob Matelso bereits geladen ist (wie im obigen Hauptteil zu sehen ist). Fantastisch. Das ist ein sauberes Tracking-Setup.

Um diese Geschichte komplett zu machen, hier ist, wie Sie ein benutzerdefiniertes Ereignis für die in Shopware 5 geladene Einkaufswelt bereitstellen können. Dieses Ereignis muss allerdings in einem benutzerdefinierten HTML-Tag ausgeführt werden:

    $.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished.tracking", function() {
    window.dataLayer.push({
          event: "shoppingworldLoaded"
        })
      });

Informieren Sie mich über Ihre Erfahrungen mit matelso und wie Sie damit umgehen.

Neugierig geworden?
Skalieren auch Sie mit der richtigen Marketing Technology. Sprechen Sie uns an.