Matomo Analytics: Storefront and Templates

Twig templates, template blocks and ViewConfig methods of Matomo Analytics for OXID eShop 7: Apex theme, connecting your own theme, embedding the opt-out page and the opt-out widget.

Deutsche Version

Back to overview

Matomo Analytics: Storefront and Templates

Live Demo: Try this and other plugins live — no installation, no risk: demo.markus-michalski.net

The module works exclusively with Twig templates. There are no Smarty (.tpl) files.

Bundled templates

Template	Purpose
`views/twig/extensions/themes/apex/layout/base.html.twig`	Extends the block `base_js`: tracking code and e-commerce code, with the consent handler in Klaro mode
`views/twig/extensions/themes/apex/page/checkout/thankyou.html.twig`	Extends the block `checkout_thankyou_info`: order tracking on the confirmation page
`@mmd_matomo_analytics/page/matomo_optout.html.twig`	Standalone opt-out page
`@mmd_matomo_analytics/widget/matomo_optout.html.twig`	Opt-out widget to include

The extensions of base_js and checkout_thankyou_info exist for the Apex theme only. For other themes the module delivers no tracking until you extend the blocks there yourself (see below).

Connecting your own theme

In your theme, extend the block base_js in layout/base.html.twig and the block checkout_thankyou_info in page/checkout/thankyou.html.twig. The bundled Apex files serve as a template. In the simplest case (without Klaro) the block looks like this:

{% 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 %}

On the confirmation page:

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

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

How Klaro mode looks in the Apex templates is described under Privacy and Consent.

Available methods

The methods are available in templates through oViewConf (extension of the class ViewConfig).

Method	Returns
`isMatomoEnabled()`	`true` if the configuration is valid and the server-side consent check passes (see Privacy)
`getMatomoTrackingCode()`	Tracking JavaScript without `<script>` tags, empty if `isMatomoEnabled()` is false
`getMatomoTrackingScript()`	Same, but with `<script>` tags
`getMatomoProductData()`	Product view data or `null` (e-commerce or product views off, or no product in the current view)
`getMatomoCartData()`	Cart data or `null` (e-commerce or cart tracking off, or cart empty)
`getMatomoEcommerceJs()`	JavaScript for the current page: product view if product data exists, otherwise cart update, otherwise empty
`isMatomoKlaroEnabled()`	Switch "Enable Klaro integration"
`getMatomoKlaroServiceName()`	Configured Klaro service name
`getMatomoUrl()`	Matomo URL without trailing slash

On the confirmation page there is also oView.getMatomoOrderTracking() (extension of the ThankYouController). It returns the order JavaScript that was stored in the session when the order was saved, and removes it from the session afterwards. Reloading the page therefore does not send the order again.

The tracking JavaScript contains quotes, so it must be output with |raw in the template.

Opt-out

Standalone page

The page is reachable through the controller matomo_optout:

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

It uses the layout layout/page.html.twig, shows the heading and description text from the translations, and includes the widget with the active language, background color ffffff and font color 333333.

In your own Twig template you can include the widget:

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

Parameter	Default	Meaning
`language`	`de`	Language code for the Matomo opt-out
`backgroundColor`	`ffffff`	Background color as hex value without `#`
`fontColor`	`000000`	Font color as hex value without `#`

The widget renders an iframe pointing to <Matomo URL>/index.php?module=CoreAdminHome&action=optOut&language=...&backgroundColor=...&fontColor=.... If no Matomo URL is saved, it shows a warning instead.

The widget only checks whether a Matomo URL is saved. It shows the iframe even when "Enable tracking" is off.

Translations

The texts live in views/twig/de/mmd_matomo_analytics_lang.php and views/twig/en/mmd_matomo_analytics_lang.php.

Ident	German	English
`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.

Matomo Analytics: Storefront and Templates

Bundled templates

Connecting your own theme

Available methods

Opt-out

Standalone page

Including the widget

Translations