webetdesign / cookie-consent-bundle Goto Github PK

Ajouter le repo et l'installer

#composer.json
"repositories": [
#...
  {
    "type": "git",
    "url": "https://github.com/webetdesign/cookie-consent-bundle.git"
  }
]

#terminal
composer require webetdesign/cookie-consent-bundle

<?php
// config/bundles.php
return [
// ...
    WebEtDesign\CookieConsentBundle\WDCookieConsentBundle::class => ['all' => true],
// ...
];

# config/routes/wd_cookie_consent.yaml
wd_cookie_consent:
    resource: "@WDCookieConsentBundle/Resources/config/routing.yaml"

Créer un catégorie pour chaque demande de consentement désirer

#config/packages/wd_cookie_consent.yaml
wd_cookie_consent:
    categories:
        - 'analytics'

#config/packages/framework.yaml
framework:
  #...
    esi: true

Pour ajouter des assets en admin vous appelez vos assets via extra_javascripts et extra_stylesheets dans config/packages/sonata/sonata_admin.yaml
Il faut faire pareil mais en front dans notre application.

Pour cela, il faut d'abord configurer l'entrée webpack

#config/packages/assets.yaml
framework:
  assets:
    packages:
     #...
      cookie:
        json_manifest_path: '%kernel.project_dir%/public/bundles/wdcookieconsent/build/manifest.json'

#config/packages/webpack_encore.yaml
webpack_encore:
  builds:
    #...
    cookie: '%kernel.project_dir%/public/bundles/wdcookieconsent/build'

//templates/base.html.twig
//...
{% block stylesheets %}
    {% for file in encore_entry_css_files('cookie', 'cookie') %}
        <link rel="stylesheet" href="{{ preload(file, { as: 'style', importance: 'high' }) }}">
    {% endfor %}
    {% for file in encore_entry_css_files('base', 'main') %}
        <link rel="stylesheet" href="{{ preload(file, { as: 'style', importance: 'high' }) }}">
    {% endfor %}
{% endblock %}
//...
{% block javascripts %}
    {{ encore_entry_script_tags('cookie', null, 'cookie') }}
    {{ encore_entry_script_tags('base', null, 'main') }}
{% endblock %}

Charger le module de cookie via render_esi (pour ne pas mettre en cache )

//templates/base.html.twig
{{ render_esi(path('wd_cookie_consent.show', { 'locale' : 'en' })) }}

Lorsqu'un utilisateur soumet le formulaire, les préférences sont enregistrées sous forme de cookies.
Les cookies ont une durée de vie de 1 an.
Les cookies suivants sont enregistrés :

• Cookie_Consent: date de soumission
• Cookie_Consent_Key: Clé générée en tant qu'identifiant du consentement de cookie soumis de l'utilisateur
• Cookie_Category_[CATEGORY]: valeur (true ou false)

RGPD exige que toutes les préférences de cookies des utilisateurs soient explicables par les webmasters. Pour cela, nous enregistrons toutes les préférences de cookies dans la base de données. Les adresses IP sont anonymisées.

Les fonctions TwigExtension suivantes sont disponibles :

WDCookieConsent_isCategoryAllowedByUser vérifier si l'utilisateur a donné son autorisation pour une categorie de cookie

{% if WDCookieConsent_isCategoryAllowedByUser('analytics') == true %}
    ...
{% endif %}

WDCookieConsent_isCookieConsentSavedByUser vérifier si l'utilisateur a enregistré des préférences

{% if WDCookieConsent_isCookieConsentSavedByUser() == true %}
    ...
{% endif %}

Vous pouvez ajouter ou supprimer n'importe quelle catégorie en modifiant la configuration et en vous assurant que des traductions sont disponibles pour ces catégories.

#config/packages/wd_cookie_consent.yaml
wd_cookie_consent:
    categories:
        - 'analytics'
        - 'youtube'
        - 'facebook'

Pour chaque catégorie crée, ajouter un block de catégorie dans le fichier de trad

#translations/WDCookieConsentBundle.fr.yml
wd_cookie_consent:
  analytics: #catégorie
    title: 'Google Analytics'
    description: "Permet d'analyser les statistiques de consultation de notre site"
    link: "https://support.google.com/analytics/answer/6004245"
    link_label: "En savoir plus"

Pour changer la couleur principale du module, surcharger la varriable css --cookie-primary

:root {
    --cookie-primary: #00abdf;
    //ou avec interpolation de variable scss
    --cookie-primary: #{$primary};
}

Si un cookie est accepté un événement est automatiquement envoyé à googleTagManager :

dataLayer.push({
  event: `rgpd_activate_${cat}`
});

il faut donc avoir préalablement installé GTM pour pouvoir gérer ce qu'il se passe une fois le consentement donné.

yarn build puis versionner les fichiers dans src/Resources/public/build