How to Integrate Osano and Piwik Pro

A guide on using Osano consent manager with Piwik Pro

This is our first episode on integrating a third-party consent manager tool with Piwik Pro. In this article, we will focus on Osano and explore the process of integrating it seamlessly with Piwik Pro.

If you currently use Osano CMP and want to integrate it with Piwik Pro for data collection and privacy management, this blog provides the perfect solution for your challenges.

The solution presented in this blog simplifies the process of integrating your Osano CMP with Piwik Pro Consent Manager. It allows you to efficiently manage user privacy and control the deployment of Piwik Pro analytics and other third-party tags/pixels on users’ browsers. Additionally, this solution supports the consent report in Piwik Pro by providing insight into the consent interaction reports showcasing the types of consent users grant through your Osano privacy banner.

If you’ve exhausted your search by exploring various online resources and even visited the Piwik Pro integration page yet cannot find a solution for integrating Osano and Piwik Pro, there’s no need to panic. Fortunately, you’ve stumbled upon the right place at the right time.

Hierarchy of Instrumentation

The correct implementation hierarchy of Piwik Pro and the Osano CMP script is essential to ensure this integration solution’s smooth and error-free functioning.

Below, we have provided an outline of the various scenarios for the instrumentation of Osano and Piwik Pro. These scenarios cover instances where we have utilized Google Tag Manager for deploying the Osano consent banner script or/and Piwik Pro tracking script, as well as cases where Google Tag Manager was not used.

Instances Where Google Tag Manager Isn’t Used for Installing Osano or Piwik Pro

In this section below, I will outline the hierarchy for instrumentation scenarios where you are not using Google Tag Manager to deploy the Osano privacy script or Piwik Pro tracking script.

To ensure seamless integration without any complications, follow these hierarchy steps:

1. Place the Osano consent banner script above the Piwik Pro tracking script.
2. Immediately after the Piwik Pro tracking script, insert the provided JavaScript integration code from this blog.

By following this order, you can ensure that the Osano and Piwik Pro scripts get integrated without any error or violation with data collection based on the consent given.

Instances Where Google Tag Manager Is Used for Installing Osano or/and Piwik Pro

If you have deployed Osano through Google Tag Manager (GTM) and your Piwik Pro is implemented either through GTM or directly on your website, the hierarchy for your instrumentation should be as follows:

1. Place your Google Tag Manager container script at the top of your website’s code.
2. If Piwik Pro is installed through GTM, ensure that your Osano script is fired before it. You can achieve this by using tag sequencing or the tag priority feature in GTM.
3. Install the JavaScript code provided in this blog immediately below the Google Tag Manager installation code.
4. However, if your Piwik Pro script is installed outside of GTM (directly on your website), it should be deployed immediately. Afterwards, place the JavaScript code we shared in this blog.

Here is an alternative hierarchy for scenarios where only Osano is deployed via Google Tag Manager

By following this hierarchy, you can ensure that Osano and Piwik Pro work harmoniously, providing adequate data collection management and privacy control on your website.

The Code That Integrates Piwik Pro and Osano Consent Manager

I want to acknowledge the assistance of ChatGPT in developing the JavaScript code that enabled the integration of Osano and Piwik Pro. While extensive testing, manual editing, and structuring were involved, crediting the tool for its contribution is essential.

<script>
function piwikandosanoComplianceSettings() {
  var osanoConsentSettings = Osano.cm.storage.getConsent();
  var osanoPiwikEssential = osanoConsentSettings.ESSENTIAL;
  var osanoPiwikStorage = osanoConsentSettings.STORAGE;
  var osanoPiwikMarketing = osanoConsentSettings.MARKETING;
  var osanoPiwikPersonalization = osanoConsentSettings.PERSONALIZATION;
  var osanoPiwikAnalytics = osanoConsentSettings.ANALYTICS;
  var settings = {
    consents: {
      analytics: {
        status: (osanoPiwikAnalytics === "ACCEPT") ? 1 : 0
      },
      ab_testing_and_personalization: {
        status: (osanoPiwikPersonalization === "ACCEPT") ? 1 : 0
      },
      user_feedback: {
        status: (osanoPiwikMarketing === "ACCEPT") ? 1 : 0
      },
      marketing_automation: {
        status: (osanoPiwikMarketing === "ACCEPT") ? 1 : 0
      },
      remarketing: {
        status: (osanoPiwikMarketing === "ACCEPT") ? 1 : 0
      },
      conversion_tracking: {
        status: (osanoPiwikMarketing === "ACCEPT") ? 1 : 0
      }
    }
  };

  if (typeof ppms !== "undefined" && ppms.cm && ppms.cm.api) {
    ppms.cm.api('setComplianceSettings', settings,
      function() {
        dataLayer.push({'event': 'Piwik_complianceSettingsSet'});
      },
      function(error) {
        dataLayer.push({'event': 'Piwik_complianceSettingsError', 'errorMessage': error.message});
      }
    );

    ppms.cm.api('getComplianceSettings',
      function(settings) {
        dataLayer.push({'event': 'Piwik_complianceSettingsUpdate', 'settings': settings});
      },
      function(error) {
        dataLayer.push({'event': 'Piwik_complianceSettingsError', 'errorMessage': error.message});
      }
    );
  } else {
    console.log("Error: ppms object is not defined.");
    // Handle the error condition here
  }

  console.log("consent retrieved and piwik updated");
  console.log("ESSENTIAL: " + osanoPiwikEssential);
  console.log("STORAGE: " + osanoPiwikStorage);
  console.log("MARKETING: " + osanoPiwikMarketing);
  console.log("PERSONALIZATION: " + osanoPiwikPersonalization);
  console.log("ANALYTICS: " + osanoPiwikAnalytics);
}

// Call the function to execute the code
piwikandosanoComplianceSettings();

// Event listener for "osano-cm-consent-saved" event
Osano.cm.addEventListener('osano-cm-consent-saved', () => {
  console.log('Consent saved');
  // Send a dataLayer event
  window.dataLayer.push({
    event: 'osanoConsentSaved'
  });
// run the piwik and osano integration code
    piwikandosanoComplianceSettings();
});

// Event listener for "osano-cm-consent-new" event
Osano.cm.addEventListener('osano-cm-consent-new', () => {
  console.log('New consent');
  // Send a dataLayer event
  window.dataLayer.push({
    event: 'osanoNewConsent'
  });
// run the piwik and osano integration code
    piwikandosanoComplianceSettings();
});function piwikandosanoComplianceSettings() {
  var osanoConsentSettings = Osano.cm.storage.getConsent();
  var osanoPiwikEssential = osanoConsentSettings.ESSENTIAL;
  var osanoPiwikStorage = osanoConsentSettings.STORAGE;
  var osanoPiwikMarketing = osanoConsentSettings.MARKETING;
  var osanoPiwikPersonalization = osanoConsentSettings.PERSONALIZATION;
  var osanoPiwikAnalytics = osanoConsentSettings.ANALYTICS;
  var settings = {
    consents: {
      analytics: {
        status: (osanoPiwikAnalytics === "ACCEPT") ? 1 : 0
      },
      ab_testing_and_personalization: {
        status: (osanoPiwikPersonalization === "ACCEPT") ? 1 : 0
      },
      user_feedback: {
        status: (osanoPiwikMarketing === "ACCEPT") ? 1 : 0
      },
      marketing_automation: {
        status: (osanoPiwikMarketing === "ACCEPT") ? 1 : 0
      },
      remarketing: {
        status: (osanoPiwikMarketing === "ACCEPT") ? 1 : 0
      },
      conversion_tracking: {
        status: (osanoPiwikMarketing === "ACCEPT") ? 1 : 0
      }
    }
  };

  if (typeof ppms !== "undefined" && ppms.cm && ppms.cm.api) {
    ppms.cm.api('setComplianceSettings', settings,
      function() {
        dataLayer.push({'event': 'Piwik_complianceSettingsSet'});
      },
      function(error) {
        dataLayer.push({'event': 'Piwik_complianceSettingsError', 'errorMessage': error.message});
      }
    );

    ppms.cm.api('getComplianceSettings',
      function(settings) {
        dataLayer.push({'event': 'Piwik_complianceSettingsUpdate', 'settings': settings});
      },
      function(error) {
        dataLayer.push({'event': 'Piwik_complianceSettingsError', 'errorMessage': error.message});
      }
    );
  } else {
    console.log("Error: ppms object is not defined.");
    // Handle the error condition here
  }

  console.log("consent retrieved and piwik updated");
  console.log("ESSENTIAL: " + osanoPiwikEssential);
  console.log("STORAGE: " + osanoPiwikStorage);
  console.log("MARKETING: " + osanoPiwikMarketing);
  console.log("PERSONALIZATION: " + osanoPiwikPersonalization);
  console.log("ANALYTICS: " + osanoPiwikAnalytics);
}

// Call the function to execute the code
piwikandosanoComplianceSettings();

// Event listener for "osano-cm-consent-saved" event
Osano.cm.addEventListener('osano-cm-consent-saved', () => {
  console.log('Consent saved');
  // Send a dataLayer event
  window.dataLayer.push({
    event: 'osanoConsentSaved'
  });
// run the piwik and osano integration code
    piwikandosanoComplianceSettings();
});
</script>

The Code Documentation Used For Integrating Osano and Piwik Pro

Here is a detailed breakdown of what the code does and how it works

This JavaScript code performs the following tasks:

1. It defines a function called “piwikandosanoComplianceSettings”, which retrieves consent settings from a storage object called “Osano.cm.storage” and assigns them to different variables.
2. It creates a settings object based on the retrieved consent settings.
3. It checks if a specific object “ppms” is defined and has certain properties. If it does, it makes API calls to set and get compliance settings using the “ppms.cm.api” function.
4. If the “ppms” object is not defined, it logs an error message.
5.  It logs the retrieved consent settings and some additional information to the console.
6. It calls the “piwikandosanoComplianceSettings” function to execute the code.
7. It adds an event listener for the “osano-cm-consent-saved” event, which is triggered when consent settings are saved. When this event occurs, it logs a message and pushes a dataLayer event to “window.dataLayer”.
8. It calls the “piwikandosanoComplianceSettings” function again after the consent is saved.
9. It adds an event listener for the “osano-cm-consent-new” event, which is triggered when a new consent is given. When this event occurs, it logs a message and pushes a dataLayer event to “window.dataLayer”.
10. It calls the “piwikandosanoComplianceSettings” function again after a new consent is given.

In summary, this code retrieves consent settings, sets and gets compliance settings, logs messages and consent information, and responds to events related to consent saving and new consent.