Anleitung zur Einrichtung für Corazon Call Tracking

Zur Einrichtung von Corazon Call-Tracking benötigen Sie ein aktives Google Analytics und Google Tag-Manager auf Ihrer Webseite. Alle nötigen Schritte können direkt auf Google Tag Manager implementiert werden, so dass Sie in dem CMS der Webseite (z.B. WordPress, Typo3, Joomla etc.) keine Änderungen vornehmen müssen.

Schritt 1

Google Tag Manager installieren (falls nicht vorhanden)

Der Google Tag Manager kann in wenigen Schritten installiert werden. Die detaillierte Anleitung für die Installation finden Sie hier: https://support.google.com/tagmanager/answer/6103696?hl=de

Falls Sie den Google Tag Manager schon installiert haben, überspringen Sie bitte diesen Schritt.

Schritt 2

Neue Variable in Tag Manager erzeugen

Um die Rufnummern an der gewünschten Stelle Ihrer Website anzuzeigen, muss eine Verbindung/Kommunikation zwischen Ihrer Webseite und Corazon Call-Tracking hergestellt werden. Dafür muss im ersten Schritt eine Variable erzeugt werden: Klicken Sie im Tag Manager im seitlichen Menü auf „Variablen“ und erzeugen Sie dort eine neue Variable mit folgenden Eingaben:

ZurückWeiter
1234

Kopieren Sie den folgenden Code für die Variable. Ersetzen Sie in prefix die Rufnummer-Daten „country“, „area“ und „personal“ durch die Ihnen von Corazon mitgeteilte Rufnummer.

Anschließend ersetzen Sie in selectors „.target-com“ durch den CSS Selector, der auf Ihrer Webseite für die Rufnummern-Anzeige genutzt wird.

function() { 
    return [ 
        { 
            name: 'www.example.com', 
            description: 'replace', 
             
            type: 'prefix', 
 
            // check this function against delivered qfApi.e164 headnumber (without extension) 
            // Only if this matches, this function is used. 
            prefix: { 
                country:  '49', 
                area:     '611', 
                personal: '123456', 
            }, 
 
            // configure selector regarding to you website 
            selectors: [ 
                '.target-con'
            ], 
            options: { 
                default: { 
                    description: 'default pattern for this function', 
                    replacementType: 'text', // ['text', 'html', 'innerHtmlSaR', 'innerHtmlSaRRegEx']
                    // text-> replace complete text context (default) 
                    // html -> replace complete innerHtml
                    // innerHtmlSaR -> search and replace innterHtml (simple search and replace) -> pattern: value being searched/needle
                    // innerhtmlSaRRegEx -> search and replace innterHtml with regex -> uses RegExp 
                    pattern: 'search pattern within selector', // string pattern (first RegExp argument);
                    modifiers: 'ig', // RegExp modifier (second RegExp argument);
                    format: '%c %a %p-%e', 
                }, 
                element: { 
                    a: { 
                        description: 'custom declaration for element ', 
            replacementType: 'text',
                        pattern: '^.*$', 
                        modifiers: 'ig', 
                        format: '(+%a) %p-%e',
                        attribute: { 
                            href: { 
                                description: 'replace whole text in attribute href', 
                                pattern: '^.*$', 
                                modifiers: 'ig', 
                                format: 'tel:%c%a%p%e', 
                            }, 
                        }, 
                    }, 
                }, 
            }, 
        }, 
    ]; 
}

Zusätzliche Informationen zur Variable


a) Beschreibung der Funktionen

  • Nachdem die Nummer-Informationen geladen wurden, wird über alle zurück gelieferten Nummern iteriert.
  • Für jede Nummer, wird über alle vorhandenen Konfigurationen (qf.var.functions) iteriert.
  • Stimmt die übermittelte Rufnummer mit dem Prefix überein, wird die aktuelle Konfiguration berücksichtigt (type & prefix).
    • Für die Bedingung werden entweder die einzelnen Telefonnummer-Bestandteile laut E164 verglichen (prefix) oder die Abfrage wird mittels Regulären Ausdruck (RegEx) durchgeführt (regex).
      prefix

      Bei dieser Abfrage muss die Ländervorwahl (z.B. 43), die nationale Vorwahl (z.B. 316) und die Anschlusskennung (z.B. 123456) übereinstimmen (die Durchwahl wird nicht berücksichtigt).
      regex

      Bei dieser Abfrage muss die übermittelte Telefonnummer mit der definierten RegEx übereinstimmen. Dazu wird die gesamte übermittelte Telefonnummer (Fully Qualified Telephone Number [FQTN] | inkl. Durchwahl), gegen die RegEx geprüft (Case-insensitive).
      „+“ + number.country + „-“ + number.area + „-“ + number.personal + „-“ + number.ext

b) Manipulation der Elemente

  • Anhand der CSS-Selectoren werden alle zu manipulierenden DOM-Elemente ermittelt und durchiteriert (Basis: document.querySelectorAll| (selectors)
  • Manipulation der Elemente:
      • Ermittlung der Konfiguration
        • Als Basis-Konfiguration werden die Default-Optionen von options.default herangezogen
        • Falls für den aktuellen Tag-Name/Type (z.B. a, div) eine eigene Konfiguration vorhanden ist, wird die Default-Kofiguration damit überschrieben (options.element.{TagName} -> z.B. options.element.a)
      • Im Allgemeinen wird einerseits der Element-Inhalt und andererseits werden die Element-Attribute angepasst.
      • Optionen: replacementType -> Definiert, wie der Element-Inhalt ersetzt werden soll.
    replacement type Beschreibung verwendete Optionen verwendete Javascript Function

    text(default)

    Es wird der gesamte Inhalt (.textContent) mit der formatierten Telefonnummer (siehe Information bei Format) als Text ersetzt.

    format

    html

    Es wird der gesamte Inhalt (.innerHTML) mit der formatierten Telefonnummer (siehe Information bei Format) als HTML ersetzt.

    format

    innerHtmlSaR

    Es wird der nach einem Text-Fragment, welcher mit der pattern Option definiert ist, im HTML-Inhalt (.innerHTML) gesucht und mit der formatierten Telefonnummer (siehe Information bei Format).

    pattern & format

    domElement.innerHTML.replace(pattern, „anhand von format ermittelter Text“)

    innerhtmlSaRRegEx

    Es wird anhand des Regulären Ausdruckes (RegEx) nach HTML-Fragmenten gesucht und mit der formatierten Telefonnummer (siehe Information bei Format) als ersetzt.

    pattern, modifiers & format

    domElement.innerHTML.replace(new RegExp(pattern, modifiers), „anhand von format ermittelter Text“)

c) Weitere Parameter

weitere Parameter Verwendung Optionen
pattern

Such-Pattern (needle)
Wird für replacementType.innerHtmlSaR & replacementType.innerhtmlSaRRegEx verwendet.
modifiers RegExp Modifiers für replacementType.innerhtmlSaRRegEx
format

Mit dem Format wird der Text definiert, der angezeigt/ersetzt werden soll.

Die gelieferte Telefonnummer kann mit folgenden Optionen formatiert werden und wird mitteln JavaScript.replace ermittelt.
  • %C: „00“ + {Ländervorwahl} -> 0043
  • %c:  „+“ + {Ländervorwahl} -> +43
  • %A: „0“ + {nationale Vorwahl} -> 0316
  • %a: {nationale Vorwahl} -> 316
  • %P:  {Anschlusskennung} -> 123456
  • %p: {Anschlusskennung} -> 123456
  • %E:  {Durchwahl} -> 001
  • %e: {Durchwahl} -> 001

Beispiel:
„0%a-%p-%e“ -> „0316-123456-001“
attribute

Weiters können DOM-Attribute gesetzt werden. Dies wird beispielsweise verwendet um Link-Ziele (Anchor-Href’s) mit der Telefonnummer zu aktualisieren.

Jedoch kann man dadurch beliebe Attribute (z.B. title) setzen.Die Ersetzung ist mittels RegExp-Replace umgesetzt.

Verwendete Javascript Function:
{Attribute-Value}.replace(new RegExp(pattern, modifiers), „anhand von format ermittelter Text“)

format:
Mit dem Format wird der Text definiert, der angezeigt/ersetzt werden soll -> siehe Beschreibung im vorherigen Block

pattern:
Such-Pattern (needle)

modifiers:
RegExp Modifiers
Schritt 3

Tag erzeugen

Um das Call-Tracking Tag zu erzeugen, rufen Sie im Tag Manager das Menü „Tags“ auf. Klicken Sie anschließend auf „neu“ und setzen Sie folgende Schritte um:

ZurückWeiter
123456

Achten Sie bei der Tag-Auswahl darauf, die richtige Vorlage „questFON Call-Tracking by telequest“ zu wählen!

Schritt 4

Testen

Überprüfen Sie im letzten Schritt, ob das Call-Tracking Tag wie erwartet ausgelöst wird. Wir empfehlen die Nutzung des Vorschaumodus des Tag-Managers.

Sie können dafür ganz einfach Ihre Webseite aufrufen und schon erscheint die dynamische Rufnummer. Eine weitere Möglichkeit ist, mit einem Keyword nach Ihrer Webseite zu suhen, Ihre Anzeigen anzuklicken und die dynamische Rufnummer auf Ihrer Webseite anzuwählen. Dadurch erhalten Sie auch gleich wertvolle Informationen über den Call, verknüpft mit Ihren Google Kampagnen.

Schritt 5

Google Analytics einrichten

Call-Tracking by telequest sendet alle eingehenden Anrufe als Ereignisse an Google Analytics, wobei die Besucherdetails der Website automatisch angehängt werden.

Die Informationen der Anrufe werden durch die Customer Dimensions angezeigt und wie folgt im Analytics angelegt:

  1. Klicken Sie in Ihrem Analytics Konto auf „Verwaltung“.
  2. Wählen Sie im Property Menü „Dd Benutzerdefinierte Dimensionen“ und „Benutzerdefinierte Dimensionen“ aus.
  3. Fügen Sie nun die Customer Dimensionen in der gewünschten Reihenfolge hinzu:
Dimension Name Umfang
1 aleg-caller-id Treffer (Hit)
2 aleg-called-id Treffer (Hit)
3 aleg-result Treffer (Hit)
4 bleg-called-id Treffer (Hit)

Die notwendigen Funktionen legen Sie im Google Analytics Konto wie folgt fest:

  1. Klicken Sie auf „Verwaltung“.
  2. Wählen Sie im Menü Datenansicht „Dd Berechnete Messwerte“ aus.
  3. Geben Sie die Messwerte wie folgt ein:
Messwert Name Format-Typ Formel
1 Calls Ganzzahl {{Ereignisse gesamt}}
2 Minuten Fließkommazahl {{Ereigniswert}}/60
3 Haltezeit Fließkommazahl {{Ereigniswert}}/60/{{Ereignisse gesamt}}

ZurückWeiter
12

TIPP: ZUSÄTZLICH ZU GOOGLE ANALYTICS KÖNNEN DIE DATEN IN DAS GOOGLE DATA STUDIO IMPORTIERT WERDEN. DORT KÖNNEN BERICHTE IN VERSCHIEDENSTEN FORMEN DARGESTELLT WERDEN.