Shopware 6 Google Analytics 4 (GA4)

In Shopware 6.4.x lässt sich Google Universal Analytics (UA) relativ einfach einbinden. Damit das auch mit Google Analytics 4 (GA4) funktioniert ist eine Template-Anpassung notwendig.

Zunächst gehe ich davon aus, dass die GA4 Property bereits angelegt ist. Für die Einrichtung in Shopware benötigen wir die Mess-ID (Tracking-ID). Hierzu klickt man in Google Analytics links unten auf das Zahnrad "Verwaltung" und im Anschluss in der Spalte "Property" auf die "Datenstreams". Hier wählt man den zugehörigen Web-Datenstream aus und sieht dann die Stream-Details wie auf dem Screenshot unten. Dort kann die Mess-ID kopiert werden.

Im Shopware 6 Backend muss man dann in der Seitenleiste den Verkaufskanal wählen und in dessen Einstellungen den Tab "Analyse" aufrufen. Hier gibt man die vorhin kopierte Mess-ID im Feld "Tracking-ID" an und aktiviert "Google Analytics aktivieren". Die beiden anderen Schalter haben nach der Anpassung keine Funktion mehr. Die IP-Adressen werden laut Google bei GA4 generell nicht protokolliert oder gespeichert.

Nun würde Shopware die GA4 Mess-ID mit dem UA Tracking-Code ausliefern, was nicht funktioniert. Daher müssen wir noch das Template für den Analytics-Code im eigenen Tehme überschreiben. Hierzu legen wir die Datei im eigenen Theme an: custom/plugins/MyThemePlugin/src/Resources/views/storefront/component/analytics.html.twig Und fügen folgenden Inhalt ein:

{% block component_head_analytics %}
    {% if context.salesChannel.analytics and context.salesChannel.analytics.isActive() %}
        {% set trackingId = context.salesChannel.analytics.getTrackingId() %}

        <!-- Google tag (gtag.js) -->
        <script async src="https://www.googletagmanager.com/gtag/js?id={{ trackingId }}"></script>
        <script>
            {% block component_head_analytics_tag_config %}
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());

                gtag('config', '{{ trackingId }}');
            {% endblock %}
        </script>
    {% endif %}
{% endblock %}

Abschließend muss das Theme noch kompiliert und der Cache geleert werden:

bin/console theme:compile
bin/console cache:clear

Kommentare und Antworten

×

Name ist erforderlich!

Geben Sie einen gültigen Namen ein

Gültige E-Mail ist erforderlich!

Gib eine gültige E-Mail Adresse ein

Kommentar ist erforderlich!

Captcha Code Kann das Bild nicht gelesen werden? Klicken Sie hier, um zu aktualisieren

Captcha ist erforderlich!

Code stimmt nicht überein!

* Diese Felder sind erforderlich.

Sei der erste der kommentiert