ember-tarteaucitron

Ember integration of tarteaucitron.js, a RGPD friendly cookie manager.

Compatibility

• Ember.js v3.24 or above
• Ember CLI v3.24 or above
• Node.js v12 or above

Installation

ember install ember-tarteaucitron

Usage

All your tarteaucitron configuration is stored inside your config/environement.js as follow:

module.exports = function (environment) {
  let ENV = {

    [...]

    tarteaucitron: {
      customServices: [], // You can define your own services directly here, see https://github.com/AmauriC/tarteaucitron.js#create-custom-service
      preInit: { // Change some settings before the initialization of tarteaucitron.js
        tarteaucitronForceCDN: "https://...", // Define where the tarteaucitron assets are available, default to <your-app>/assets/tarteaucitron/
        tarteaucitronForceLanguage: 'en', // Force the display language (default to the current browser language)
        tarteaucitronForceExpire: 365 * 10, // Force the expire cookie time (default to 365)
        tarteaucitronCustomText: { // Change a translation, see https://github.com/AmauriC/tarteaucitron.js#customize-text
          'support': {
            'title': 'Support client',
          },
          'close': 'Enregistrer et fermer',
          'engage-twitter': 'Suivez-nous sur Twitter !',
        },
      },
      config: {}, // tarteaucitron init configuration, see https://github.com/AmauriC/tarteaucitron.js#how-to-use
      jobs: ['googlefonts'], // Services name to activate
      user: { // Configuration used by services
        googleFonts: ['Tangerine'], // Configuration for googlefonts
      },
    },
  }

  [...]

  return ENV
}

If you need to deactivate ember-tarteaucitron, you can configure on your ember-cli-build.js file as follow:

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon')

module.exports = function (defaults) {
  let app = new EmberAddon(defaults, {
    'ember-tarteaucitron': {
      enabled: false, // Enabled by default
    },
  })

  [...]
}

CDN

Here is the configuration if you want to use CDN for tarteaucitron assets:

module.exports = function (environment) {
  let ENV = {

    [...]

    tarteaucitron: {
      preInit: {
        tarteaucitronForceCDN: 'https://cdn.jsdelivr.net/npm/tarteaucitronjs@latest/',
      },
      [...]
    },
  }

  [...]

  return ENV
}

And you can avoid to import tarteaucitron assets:

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon')

module.exports = function (defaults) {
  let app = new EmberAddon(defaults, {
    'ember-tarteaucitron': {
      importAssets: false,
    },
  })

  [...]
}

API

The tarteaucitron service exposes functions in order to add new jobs programmatically and listen to events.

Setup a new job

• addJob(name, config): Add a new job with configuration

Service events

• addServiceAddedListener(name, callback): listener called when a service is added
• removeServiceAddedListener(name, callback): remove the listener when a service is added
• addServiceLoadedListener(name, callback): listener called when a service is loaded
• removeServiceLoadedListener(name, callback): remove the listener when a service is loaded

The service names are defined in tarteaucitron: https://github.com/AmauriC/tarteaucitron.js/blob/master/tarteaucitron.services.js

Tarteaucitron events

• addTACListener(name, callback): listener when an event occurred
• removeTACListener(name, callback): remove listener when an event occurred

The following events are available:

• tac.root_available: the root element with panel has been created, services will be loaded
• tac.open_alert: the alert is opened
• tac.close_alert: the alert is closed
• tac.open_panel: the panel is opened
• tac.close_panel: the panel is closed

Code example

import Controller from '@ember/controller'
import { service } from '@ember/service'
import { tracked } from '@glimmer/tracking'

export default class ApplicationController extends Controller {
  @service tarteaucitron

  @tracked googlefontsLoaded = false
  @tracked facebookpixelLoaded = false

  constructor() {
    super(...arguments)
    this.tarteaucitron.addServiceLoadedListener('googlefonts', () => {
      this.googlefontsLoaded = true
      this.tarteaucitron.removeServiceLoadedListener('googlefonts')
    })
    this.tarteaucitron.addServiceLoadedListener('facebookpixel', () => {
      this.facebookpixelLoaded = true
      this.tarteaucitron.removeServiceLoadedListener('facebookpixel')
    })
    setTimeout(() => {
      this.tarteaucitron.addJob('facebookpixel', { facebookpixelId: 'YOUR-ID' })
    }, 5000)
  }
}

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.