Integrate Kameleoon with Matomo

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 06/17/2022

3 min

Intermediate

Manage your integrations

Analytics

CDP/DMP

CMP

CMS

Developers

Others

Was this content useful?

Matomo offers data visualization tools such as heat maps. For more information, you can consult the documentation proposed by Matomo on this subject.

Activate Matomo (formerly Piwik)

To use Matomo (formerly Piwik), the first step is to activate it on the Kameleoon Integrations page.

Log in to your Kameleoon App, click on “Admin” and then “Integrations” in the sidebar.

If you search “piwik” (with or without capital letters), the tool should be displayed in the search results.

By default, the tool is not installed. This is signaled by this icon:

With a click on “Install the tool”, you will be able to select the projects on which you want to activate it, so that information can be correctly reported to Matomo.

Once you have configured the tool, click on “Validate” in the bottom-right corner: the configuration panel closes. You will then see a “ON” toggle on the right of the tool’s line, as well as the number of projects the tool is configured on.

The results of your experiments will be transmitted to Matomo if the script of the tool is installed on your pages.

Please note that if you need to slightly change the behavior of our native bridge, you can create a custom analytics bridge and use our Matomo sample code you can take from our Github repository.

Associate Matomo with an experiment

In the Graphic editor

Once Matomo is activated on the Integrations page, you can select it as a reporting tool at the “Tracking and goals” step of the finalization panel.

Select in the drop-down list the ID of the Matomo custom variable (customVar) you wish to associate.

Kameleoon will automatically send the data to Matomo via this custom variable.

On the Experiments results page

It is also possible to select it among the reporting tools on the results page of an experiment.

Select from the drop-down list the ID of the custom variable (customVar) you wish to associate.

Kameleoon will automatically send the data to Matomo through this custom variable. Only the data retrieved after the tool’s activation will be taken into account.

Associate Matomo with a personalization

On the personalization creation page

Once Matomo is activated on the Integrations page, you can select it as a reporting tool for your personalization.

Select from the drop-down list the ID of the custom variable (customVar) you wish to associate.

Kameleoon will automatically send the data to Matomo through this custom variable.

Segment your results in Matomo

To understand how to segment your results according to this custom variable, you can refer to the Matomo documentation on the subject.

Get Matomo (Piwik Pro) Matomo Audiences for segment data in Kameleoon

The available segments in your DMP are being made available by Piwik Pro Audiences via a REST-API.

On your Kameleoon account, click on “Administrate” in the left-hand menu, then on “Projects”.

Global custom script

On the card for your site or mobile app, click on “Configuration”: you’ll now access the configuration of your project on Kameleoon.

Unfold the “General” section.

The “Global custom script” insert will enable you to link Kameleoon to Matomo. Any JavaScript code you add in this insert will be executed every time the page is loaded. This feature is usually used to add complex tracking code or integration to other solutions.

Please copy and paste the code below into the Global script section.

const getPiwikProSegments = (visitorID) => {
        const clientID = 'Replace this with your client_id from generated credentials';
        const websiteID = 'Replace this with your project_id';
        const xhr = new XMLHttpRequest();
        xhr.onload = function run() {
            if (this.status === 200) {
                Kameleoon.API.Data.setCustomData(
                    'Piwik Pro segments',
                    JSON.parse(xhr.response)
                );
            }
        };
        xhr.open('GET', `https://customers.kameleoon.com/kameleoon/piwik/user/${visitorID}?id=${clientID}&website_id=${websiteID}`, true);
        xhr.send();
    };

    Kameleoon.API.Core.runWhenConditionTrue(() => typeof _paq !== 'undefined', () => {
        _paq.push([function init() {
            getPiwikProSegments(this.getVisitorId());
        }]);
    });

Click on “Validate” to apply the changes to your configuration.

Custom data

You then need to create a new custom data.

You will need:

  • your client_id & client_secret for generating Bearer Token (get Credentials);
  • your website_id.

Use the “Activation API Method” acquisition method. This code should be placed in the Advanced settings section of the custom data (don’t forget to add your client_id and website_id).

  let segmentPW = [];
     const clientID = 'Replace this with your client_id from generated credentials';
     const websiteID = 'Replace this with you website_id';
 

     const xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function check() {
         if (this.readyState === 4) segmentPW = JSON.parse(xhr.response);
     };
     xhr.open('GET', `https://customers.kameleoon.com/kameleoon/piwik/segments/?id=${clientID}&website_id=${websiteID}`, false);
     xhr.send();
     return segmentPW; 

You will notice that in this code we call a Kameleoon Webservice which wraps the Piwik Pro API to get all the segments. This is needed to go throughout CORS policy issues.

The custom data should be set to the “list of” and “strings” types, the scope is “Page”.

External Segment Sync for Server-side

If you would like to use Matomo segment data with one of our SDKs, you will need to follow the guidelines provided in each SDK documentation and use the method retrievedatafromremotesource.

  • In this article :