Matomo Analytics: Storefront und Templates

Twig-Templates, Template-Blöcke und ViewConfig-Methoden von Matomo Analytics für OXID eShop 7: Apex-Theme, eigenes Theme anbinden, Opt-Out-Seite und Opt-Out-Widget einbinden.

English Version

Zurück zur Übersicht

Matomo Analytics: Storefront und Templates

Live Demo: Teste dieses und weitere Plugins live — ohne Installation, ohne Risiko: demo.markus-michalski.net

Das Modul arbeitet ausschließlich mit Twig-Templates. Smarty-Dateien (.tpl) gibt es nicht.

Mitgelieferte Templates

Template	Zweck
`views/twig/extensions/themes/apex/layout/base.html.twig`	Erweitert den Block `base_js`: Tracking-Code und E-Commerce-Code, im Klaro-Modus mit Consent-Handler
`views/twig/extensions/themes/apex/page/checkout/thankyou.html.twig`	Erweitert den Block `checkout_thankyou_info`: Order-Tracking auf der Bestätigungsseite
`@mmd_matomo_analytics/page/matomo_optout.html.twig`	Eigenständige Opt-Out-Seite
`@mmd_matomo_analytics/widget/matomo_optout.html.twig`	Opt-Out-Widget zum Einbinden

Die Erweiterungen von base_js und checkout_thankyou_info liegen nur für das Apex-Theme vor. Für andere Themes liefert das Modul kein Tracking aus, bis du die Blöcke dort selbst erweiterst (siehe unten).

Eigenes Theme anbinden

Erweitere in deinem Theme den Block base_js in layout/base.html.twig und den Block checkout_thankyou_info in page/checkout/thankyou.html.twig. Die mitgelieferten Apex-Dateien dienen als Vorlage. Im einfachsten Fall (ohne Klaro) sieht der Block so aus:

{% block base_js %}
    {{ parent() }}

    {% if oViewConf.isMatomoEnabled() %}
        <script>
            {{ oViewConf.getMatomoTrackingCode()|raw }}
        </script>

        {% set matomoEcommerceJs = oViewConf.getMatomoEcommerceJs() %}
        {% if matomoEcommerceJs %}
            <script>
                {{ matomoEcommerceJs|raw }}
            </script>
        {% endif %}
    {% endif %}
{% endblock %}

Auf der Bestätigungsseite:

{% block checkout_thankyou_info %}
    {{ parent() }}

    {% if oViewConf.isMatomoEnabled() %}
        {% set matomoOrderTracking = oView.getMatomoOrderTracking() %}
        {% if matomoOrderTracking %}
            <script>
                {{ matomoOrderTracking|raw }}
            </script>
        {% endif %}
    {% endif %}
{% endblock %}

Wie der Klaro-Modus in den Apex-Templates aussieht, steht unter Datenschutz und Einwilligung.

Verfügbare Methoden

Die Methoden stehen im Template über oViewConf zur Verfügung (Erweiterung der Klasse ViewConfig).

Methode	Rückgabe
`isMatomoEnabled()`	`true`, wenn die Konfiguration gültig ist und die serverseitige Consent-Prüfung besteht (siehe Datenschutz)
`getMatomoTrackingCode()`	Tracking-JavaScript ohne `<script>`-Tags, leer wenn `isMatomoEnabled()` falsch ist
`getMatomoTrackingScript()`	wie oben, aber mit `<script>`-Tags
`getMatomoProductData()`	Daten der Produktansicht oder `null` (E-Commerce oder Produktansichten aus, oder kein Produkt in der aktuellen Ansicht)
`getMatomoCartData()`	Warenkorb-Daten oder `null` (E-Commerce oder Warenkorb-Tracking aus, oder Warenkorb leer)
`getMatomoEcommerceJs()`	JavaScript für die aktuelle Seite: Produktansicht, wenn Produktdaten vorliegen, sonst Warenkorb-Update, sonst leer
`isMatomoKlaroEnabled()`	Schalter "Klaro Integration aktivieren"
`getMatomoKlaroServiceName()`	Eingestellter Klaro Service-Name
`getMatomoUrl()`	Matomo-URL ohne abschließenden Schrägstrich

Auf der Bestätigungsseite kommt dazu oView.getMatomoOrderTracking() (Erweiterung des ThankYouController). Die Methode liefert das Order-JavaScript, das beim Speichern der Bestellung in der Session abgelegt wurde, und entfernt es danach aus der Session. Ein Neuladen der Seite sendet die Bestellung deshalb nicht erneut.

Das Tracking-JavaScript enthält Anführungszeichen, es muss im Template mit |raw ausgegeben werden.

Opt-Out

Standalone-Seite

Die Seite ist unter dem Controller matomo_optout erreichbar:

https://dein-shop.example/index.php?cl=matomo_optout

Sie nutzt das Layout layout/page.html.twig, zeigt die Überschrift und den Beschreibungstext aus den Übersetzungen und bindet das Widget mit der aktiven Sprache, Hintergrundfarbe ffffff und Schriftfarbe 333333 ein.

In einem eigenen Twig-Template kannst du das Widget einbinden:

{% include "@mmd_matomo_analytics/widget/matomo_optout.html.twig" with {
    language: "de",
    backgroundColor: "ffffff",
    fontColor: "000000"
} %}

Parameter	Standard	Bedeutung
`language`	`de`	Sprachcode für das Matomo-Opt-Out
`backgroundColor`	`ffffff`	Hintergrundfarbe als Hex-Wert ohne `#`
`fontColor`	`000000`	Schriftfarbe als Hex-Wert ohne `#`

Das Widget erzeugt ein iFrame auf <Matomo-URL>/index.php?module=CoreAdminHome&action=optOut&language=...&backgroundColor=...&fontColor=.... Ist keine Matomo-URL gespeichert, zeigt es stattdessen eine Warnung.

Das Widget prüft nur, ob eine Matomo-URL gespeichert ist. Es zeigt das iFrame auch dann, wenn "Tracking aktivieren" aus ist.

Übersetzungen

Die Texte stehen in views/twig/de/mmd_matomo_analytics_lang.php und views/twig/en/mmd_matomo_analytics_lang.php.

Ident	Deutsch	Englisch
`MMD_MATOMO_OPTOUT_TITLE`	Webanalyse Opt-Out	Web Analytics Opt-Out
`MMD_MATOMO_OPTOUT_DESCRIPTION`	Hier können Sie der Erfassung Ihrer Nutzungsdaten durch Matomo widersprechen. Wenn Sie dem Opt-Out zustimmen, wird ein Cookie gesetzt, der die Erfassung Ihrer Daten auf dieser Website verhindert.	Here you can opt out of being tracked by Matomo web analytics. If you agree to the opt-out, a cookie will be set that prevents tracking of your data on this website.
`MMD_MATOMO_OPTOUT_NOT_CONFIGURED`	Die Matomo-Integration ist nicht konfiguriert.	Matomo integration is not configured.