@txp-cms/usercentrics v0.4.0

@txp-cms/usercentrics

Usercentrics integration for your Nuxt project.

Setup

• Add @txp-cms/usercentrics dependency using yarn to your project
• Add @txp-cms/usercentrics to modules section of nuxt.config.js including your specific Usercentrics settings ID.

{
  modules: [
    ['@txp-cms/usercentrics', {
      settingsId: process.env.USERCENTRICS_ID
    }]
  ]
}

Options

• settingsId (string): Your personal usercentrics settings id
• includeInDev (boolean): Decide whether the usercentrics script shall be loaded in nuxt dev mode, too (default: true)

Usage

Google Tag Manager

In order to prevent a specific service from loading until the consent via usercentrics has been given, set its script type to 'text/plain' and add a usercentrics attribute with the name of the usercentrics consent (i.e. 'Google Tag Manager'):

this.options.head.script.push({
  type: 'text/plain',
  'data-usercentrics': 'Google Tag Manager',
  src: '//www.googletagmanager.com/gtm.js',
  defer: true
})

Usercentrics Helper

Use the UsercentricsHelper component in order to render dom content only when one or more specific consents have been given.

First include the component where you need it:

<script>
import UsercentricsHelper from '@txp-cms/usercentrics/components/UsercentricsHelper'
// ...
</script>

Secondly add a new data layer consentEvents in the usercentrics admin ui (Service Settings > Advanced Data Processing Settings) and activate the events shown below:

Now you can use the Helper in your Project. The consents-to-ensure attribute has to be an array containing the usercentrics names of the required consents.

<UsercentricsHelper :consents-to-ensure="['Google Maps']">
  <!-- content that is displayed if all required consents are granted -->
</UsercentricsHelper>

You can also add a fallback layout and make use of the missingConsents Array and the grantMissingConsents function that it provides:

<UsercentricsHelper :consents-to-ensure="['Google Maps']">
  <template v-slot:missingConsents>
    <!-- customized fallback that is displayed as long as consents are missing -->
    <div>
      <p>Missing Consents: {{ missingConsents.join() }}</p>
      <button @click="grantMissingConsents">Grant all missing consents</button>
    </div>
  </template>
  <template v-slot:default>
    <!-- content that is displayed if all required consents are granted -->
  </template>
</UsercentricsHelper>