UsercentricsEdit on GitHub
Make sure you have integrated the necessary tracking tools to your stores independently of Spryker’s Usercentrics integration and before you start configuring them in Usercentrics.
Based on the tracking tools you use in your Storefronts, you can define different sets of tracking tool configurations, called Settings in the Usercentrics Admin Interface. You can use these different settings for different countries of your storefronts, depending on their legal requirements for user consent and data privacy. Every setting has its unique setting ID. To comply with the legislation of each country you have in your shop, you can configure which setting ID is to be used in which Spryker store.
To manage your users’ consent to the various tracking tools or data processing services that you use to track their behavior in your store, you can use Usercentrics support of default tracking tools or integrate the custom ones. The tracking tools you defined in Usercentrics are displayed on the Storefront in the Usercentrics cookie consent dialog so users can consent to which tracking tools they agree.
This is how the basic cookie consent dialog might look if you have Usercentrics integrated into your Spryker store:
When users click on More in the basic cookie consent dialog, they can see the apps and websites that use tracking cookies in your store. Here they can accept or reject tracking cookies of the individual apps and websites:
To be GDPR compliant, you have to inject the Usercentrics cookies consent dialog into every page. If you use Spryker with an external CMS whose pages are separated from Spryker, additional effort is needed from your side, as no single root place of injection is usually available. Having separate CMS pages outside of the Spryker store requires additional configuration in the external CMS and has to be done independently of the Spryker SCCOS.
Usercentrics integration and configuration
You can configure the data processing services and the visual representation of the cookie consent dialogs for your store in the Usercentrics Admin Interface. For details, see the Usercentrics knowledge base.
To integrate Usercentics:
- In your store’s Back Office, go to Apps > Catalog.
- Click Usercentrics. This takes you to the Usercentrics app details page.
- In the top right corner of the Usercentrics app details page, click Connect app. This displays a message about the successful integration of the app. The Usercentrics app’s status changes to Connection pending.
- Log in to the Usercentrics Admin Interface.
- In the Usercentrics Admin Interface, copy the setting ID of your app:
- Go back to your store’s Back Office, to the Usercentrics app details page.
- In the top right corner of the Usercentrics app details page, click Configure.
- In the Configure pane, in Global Settings, by default, Enable Smart Data Protector is selected. You can either leave this setting or select Enable Direct Integration (Works only with Google Tag manager).
- Select the store and insert the setting ID from step 5.
- To activate Usercentrics for the selected store, select Is active.
- Optional: To add more stores with the same or different setting IDs, click Add store configuration.
That’s it. You have integrated the Usercentrics app into your store. The app changes to Connected on the apps catalog page. Now, the cookie consent dialogs should be displayed on every page of the Storefront.
Global settings configuration
There are three ways to integrate Usecentrics: by direct integration, by the Usercentrics Smart Data Protector, and integration with Google Tag Manager. In the Spryker Back Office, you can select either Smart Data Protector or Google Tag Manager. At the same time, the Smart Data Protector is the preferred and default setting.
All of the three approaches require you to get the setting ID for your store in the Usercentrics Admin Interface and configure the data processing services on page Service Settings > Data Processing Services.
The direct integration requires quite a bit of manual work by developers.
The direct integration is the most basic and, at the same time, the most cumbersome way of integrating Usercentrics. We do not support the direct integration approach in the ACP, so if you choose it, you should not use the Spryker Usercentrics integration.
The direct integration presupposes that you inject the Usercentrics JavaScrip tag into your site with the setting ID.
Example script tag for the direct integration:
<script id="usercentrics-cmp" data-settings-id="apXtrZ9ec" src="https://app.usercentrics.eu/browser-ui/latest/bundle.js" defer></script>
apXtrZ9ec is the setting ID that identifies configuration of the data processing services for your store in the Usercentrics Admin Interface.
For more details about the Usercetrics direct integration, see the Usercentrics documentation.
Smart Data Protector
The Smart Data Protector blocks the data processing services you added to your store and activates them only for customers that gave their consent to do so. The Smart Data Protector is the preferred and default setting to configure Usercentrics using Spryker. You can apply it if you don’t use a third-party tracking management tool yet such as Google Tag Manager or others and prefer a code-free and therefore the most convenient approach to configure Usercentrics.
Every data processing service not supported by Usercentrics by default requires a custom manual configuration in the Usercentrics Admin Interface and corresponding adaption as for the Direct Integration case. For more information about the custom services, see Usercentrics documentation on custom data processing services.
Google Tag Manager
If you already have the Google Tag Manager integrated into your store, to use the technology legally, you need the cookie consent dialog to appear in your stores. You can achieve that by using the Google Tag Manager with Usercentrics.
To use Usercentrics with the Google Tag Manager, make sure that:
The Usersentrics data processing services match the tracking tools you have in the Google Tag Manager. For this, in the Usercentrics Admin Interface, go to Service Settings > Data Processing Services and define the same data processing services that you have in the Google Tag Manager.
In the Google Tag Manager UI, configure the variables and triggers to work with Usercentrics. For details about how to do that, see Google Tag Manager Configuration.
Disconnecting Usercentrics from your store
To disconnect the Usercentrics app from your store, on the Usercentrics app details page, next to the Configure button, hold the pointer over and click Disconnect.
Disconnecting the app permanently deletes all the existing Usercentrics configs.
For submitting the form