Wo finde ich die Einstellung?
Vertriebskanal > Webshop > Bearbeiten > Attribute
Klicken Sie anschließend unten auf die Registerkarte Branding und soziale Netzwerke:
Scrollen Sie anschließend nach unten. Dort finden Sie die Einstellungen für Google Analytics und den Google Tag Manager:
Was bedeutet das?
In diesem Artikel erklären wir, wie Sie Ihr Google-Tag-Manager-Konto konfigurieren, um die Ereignisse Ihres Palisis-Webshops zu erfassen und zu analysieren.
Was sollte ich tun?
Bevor Sie beginnen, stellen Sie bitte sicher, dass Sie alle Schritte der Ersteinrichtung unserer Google-Tag-Manager-Integration befolgen, da dies Voraussetzung für die Durchführung dieser Anleitung ist. Falls nicht, öffnen Sie bitte den Support-Artikel und führen Sie diese Schritte zuerst aus.
Bitte beachten Sie, dass für diese Anleitung Grundkenntnisse in der Verwendung von Google Analytics und Google Tag Manager erforderlich sind.
Im folgenden Artikel werden die Begriffe „übergeordnetes Frame“ und „untergeordnetes Frame“ verwendet.
- Übergeordnetes Frame: Damit ist die Hauptwebseite gemeint, die ein oder mehrere iframes enthält. Es ist vergleichbar mit dem Hauptfenster der Webseite.
- Untergeordnetes Frame: Ein untergeordnetes Frame ist ein iframe, der in das übergeordnete Frame eingebettet ist. Es ist vergleichbar mit einem kleineren Fenster innerhalb des übergeordneten Frames, in dem externe Inhalte wie eine andere Webseite oder ein Widget angezeigt werden.
Einleitung
Wir werden ein separates Google-Tag in den Palisis-Webshop integrieren und ein benutzerdefiniertes Skript zum Google-Tag im übergeordneten und untergeordneten Frame hinzufügen, damit diese beiden Tags miteinander kommunizieren können. So können wir die Tracking-Ereignisse vom untergeordneten Frame an das übergeordnete Frame und vom übergeordneten Frame an den Google Tag Manager senden, der mit Google Analytics verknüpft ist.
Am Ende benötigen Sie zwei separate Container im Google Tag Manager: einen für das übergeordnete Frame und einen weiteren für das untergeordnete Frame, der der URL des Palisis-Webshops entspricht.
Teil 1 – Benutzerdefiniertes HTML-Skript zum Google-Tag des übergeordneten Frames hinzufügen
Schritt 1: Öffnen Sie das Google-Tag Ihres übergeordneten Frames
Schritt 2: Fügen Sie ein neues Tag hinzu
Schritt 3: Die Tag-Konfiguration lautet „Benutzerdefiniertes HTML“
Schritt 4: Kopieren Sie den unten stehenden benutzerdefinierten HTML-Code für das übergeordnete Frame und fügen Sie ihn in das Codefeld ein
Schritt 5: Ersetzen Sie die URL bei „var childorigin“ durch die tatsächliche URL Ihres Palisis-Webshops.
Schritt 6: Wählen Sie als Auslöser „Seitenaufrufe“ aus
Schritt 7: Übermitteln und veröffentlichen Sie die Änderungen im Google-Tag-Arbeitsbereich
Schritt 8: Nachdem Sie das Google-Tag erfolgreich veröffentlicht haben, ist Teil 1 abgeschlossen.
Video zum Hinzufügen des benutzerdefinierten HTML-Skripts zum Google-Tag des übergeordneten Frames
Benutzerdefinierter HTML-Code zur Integration in das Google-Tag der übergeordneten Webseite
Bitte ersetzen Sie die URL in „var childOrigin = 'https://myshop.palisis.com';" durch die tatsächliche URL Ihres Palisis-Webshops.
<script> (function() { // set the iframe domain name (e.g https://domainname.com) var childOrigin = 'https://myshop.palisis.com'; // Creating current timestamp just for console log var date = new Date(); var day = date.getDate(); var month = date.getMonth() + 1; var year = date.getFullYear(); var time = date.getTime(); var currentDate = day + '-' + month + '-' + year + '-' + time; console.log("Parent Frame: Loaded - " + currentDate); // Maximum time in milliseconds to wait for GA tracker to load. // Again, irrelevant for GA4. var maxGATime = 20000; // Don't touch anything that follows var pollInterval = 2000; //console.log('Parent Frame: child origin ' + childOrigin); var postCallback = function(event) { console.log("(parent) Child Origin: " + event.origin); // event origin doesn't match with childOrigin then do nothing if (event.origin !== childOrigin) return; console.log('Parent frame: (recieve) data: ' + event.data); if (event.data !== 'childReady' && !event.data.event) return; if (event.data === 'childReady') { console.log('Parent frame: sending parentReady to child'); // Send event that parent is ready event.source.postMessage('parentReady', event.origin); var pollCallback = function() { // Stop polling if maxTime reached maxGATime -= pollInterval; if (maxGATime <= 0) window.clearInterval(poll); // Only proceed if GA loaded and tracker accessible var cookie = {}; window.document.cookie.split(';').forEach(function(el) { var splitCookie = el.split('='); var key = splitCookie[0].trim(); var value = splitCookie[1]; cookie[key] = value; }); console.log("Parent frame: Client ID - " + cookie["_ga"].substring(6)); var ga_client_id = cookie["_ga"].substring(6); if (ga_client_id) { // Send message back to frame with Client ID event.source.postMessage({ event: 'clientId', clientId: ga_client_id }, event.origin); // Stop polling if not already done so window.clearInterval(poll); } }; // Start polling for Google Analytics tracker var poll = window.setInterval(pollCallback, pollInterval) } // Push dataLayer message from iframe to dataLayer of parent if (event.data.event) { console.log("Parent frame: dataLayer from iframe: " + event.data.event); window.dataLayer.push(event.data); } }; // Start listening for messages from child frame window.addEventListener('message', postCallback); })(); </script>
Teil 2 – Benutzerdefiniertes HTML-Skript zum Google-Tag des untergeordneten Frames hinzufügen
Sie müssen wissen, wie Sie benutzerdefinierte GA4-Ereignisse im Google Tag Manager hinzufügen. Falls Sie unsicher sind oder sich nicht mehr daran erinnern, öffnen Sie bitte den ursprünglichen Support-Artikel zur Google-Tag-Manager-Integration.
Schritt 1: Erstellen Sie ein neues Google-Tag für das untergeordnete Frame oder wechseln Sie zu dem bereits vorhandenen separaten Tag für das untergeordnete Frame.
Schritt 2: Fügen Sie alle benutzerdefinierten GA4-Ereignisse „add_to_cart“, „purchase“, „remove_from_cart“, „begin_checkout“ und „add_payment_info“ hinzu. Fahren Sie anschließend mit Schritt 3 fort. Wenn Sie nicht wissen, wie Sie diese GA4-Ereignisse hinzufügen, öffnen Sie bitte den ursprünglichen Support-Artikel zur Google-Tag-Manager-Integration.
Schritt 3: Fügen Sie ein neues Tag hinzu
Schritt 4: Die Tag-Konfiguration lautet „Benutzerdefiniertes HTML“
Schritt 5: Kopieren Sie den unten stehenden benutzerdefinierten HTML-Code für das untergeordnete Frame und fügen Sie ihn in das Codefeld ein
Schritt 6: Ersetzen Sie die URL bei „var parentOrigin“ durch die tatsächliche URL Ihrer übergeordneten Domain
Schritt 7: Wählen Sie als Auslöser „Seitenaufrufe“ sowie alle benutzerdefinierten Ereignisse aus, die Sie erfassen möchten, z. B. „purchase“ oder „add_to_cart“.
Schritt 8: Übermitteln und veröffentlichen Sie die Änderungen im Google-Tag-Arbeitsbereich
Schritt 9: Melden Sie sich in Ihrem Palisis-Backoffice an, gehen Sie zu Vertriebskanäle → Online → Webshop und wählen Sie Ihren Webshop aus. Klicken Sie auf „Bearbeiten“, öffnen Sie „Branding und soziale Netzwerke“, scrollen Sie nach unten zu „Google-Tag-Manager-ID“, geben Sie den Code GTM-XXXXXX des untergeordneten Google-Tags ein, aktivieren Sie „Google Analytics Ecommerce“ und klicken Sie auf „Speichern“.
Schritt 10: Nachdem Sie das Google-Tag erfolgreich veröffentlicht haben, ist Teil 2 abgeschlossen.