# Ocyan plugin Cookie Jar

Learn more
------------
Learn more about cookies in the Netherlands at:
https://www.rijksoverheid.nl/onderwerpen/privacy-en-persoonsgegevens/vraag-en-antwoord/mag-een-website-ongevraagd-cookies-plaatsen

Installation
------------
1. Add `ocyan.plugin.cookie_jar` to your projects dependencies.
2. Add CONFIG to your config/ocyan.json

Development
-----------

if you create a new snippet, make sure the id inside of the config is the same
name as the folder.

Usage
-----

You can use the cookie_jar plugin for custom external scripts in your project.
The cookie_jar plugin adds a variable named ``cookie_jar`` to all templates by
means of a template context processor.

If you are using any snippets. scripts or content that might add cookies, then you must:

1. Determine what type of cookies are set (functional, analytical, social or marketing)
2. Wrap the snippet in an if statement like this:

For functional cookies:
```
{% if cookie_jar.functional.is_approved %}
<script>
    // api integration
</script>
{% endif %}
```

For analytical cookies:
```
{% if cookie_jar.analytical.is_approved %}
<script>
    // some kind of analytics script
</script>
{% endif %}
```

For social cookies:
```
{% if cookie_jar.social.is_approved %}
<script>
    // facebook ellende and tracking cookies
</script>
{% endif %}
```

For marketing cookies
```
{% if cookie_jar.marketing.is_approved %}
<script>
    // advertisements
</script>
{% endif %}
```

Doing this will be enough to make sure that *IF ANY APPROVAL IS NEEDED* the
content will only be rendered if the approval was given by the user. _If no
approval is needed at all, the content will always be rendered_

This means you should also use this to wrap functional and analytical cookie
content, because if the rules change, we will simply update the logic to the
new rules and we can update all sites in 1 go.

Profiling script impact
-----------------------

When a site has a very bad mobile score it can be useful to turn off all
external scripts that are being loaded to determine the cause.
Add the "profile-script-impact" parameter to the url to turn off all
cookiejar categories which will disable loading any external scripts.

```
http://127.0.0.1:8000/categorie/tassen/kleine-tassen-10/?profile-script-impact
```

Script delay
------------

By changing the value of the settings COOKIE_JAR_SCRIPT_DELAY in your project's
django setting you can change the delay befor some of cookiejar's scripts 
become activated. By default 8000 miliseconds is used as the delay to stop
google page speed from complaining

Accepted settings
------------

```
"settings": [
{
  "name": "cookie_jar",
  "description": "Cookie Jar",
  "dependencies": [
    "wagtail_oscar"
  ],
  "ocyan_plugins": [
    "ocyan.plugin.cookie_jar"
  ],
  "settings": [
    {
      "id": "bing_uet",
      "title": "Bing Universal Event Tracking id",
      "type": "text",
      "required": false,
      "help": "Bijvoorbeeld: 32000206"
    },
    {
      "id": "google_analytics",
      "title": "Google tracking id",
      "type": "text",
      "required": false,
      "help": "Bijvoorbeeld: UA-XXXXXXXX-X"
    },
    {
      "id": "script_location",
      "title": "Where should the google analytics/tagmanager script go?",
      "type": "dropdown",
      "multiple": false,
      "fields": [
        "footer",
        "header"
      ],
      "default": "footer",
      "required": false,
      "help": "For performance reasons this script should go in the footer, but if the customer insists, it can be put in the head as well"
    },
    {
      "id": "google_tag_manager",
      "title": "Google tag manager tracking id",
      "type": "text",
      "required": false,
      "help": "Bijvoorbeeld: GTM-XXXXXX"
    },
    {
      "id": "google_tag_manager_cookie_type",
      "title": "Het cookie type van google tag manager",
      "type": "dropdown",
      "multiple": false,
      "fields": [
        "analytical",
        "social",
        "marketing"
      ],
      "default": "analytical",
      "required": false,
      "help": "Indien tag manager wordt gebruikt om externe script in te laden, kan het zijn dat er cookies van een ander type dan analytical worden gezet. Kies dan het juiste type"
    },
    {
      "id": "trusted",
      "title": "Trusted Shops ID",
      "type": "text",
      "required": false,
      "help": "Bijvoorbeeld: X14CE9340F524XX5EBF7DF86A325611E1"
    },
    {
      "id": "tawk",
      "title": "Tawk Rechtstreekse gesprekskoppeling url",
      "type": "text",
      "required": false,
      "help": "Bijvoorbeeld: https://embed.tawk.to/609a7b53b1d5182476b7d907/1f5dn3gb8 De koppelurl valt te vinden onder: Administratie (tandwieltje) -> Klik onder channels het kopje 'Chat-widget' > Rechtstreekse gesprekskoppeling. Let wel op! deze url begint met tawk.to, dat moet embed.tawk.to zijn."
    },
    {
      "id": "facebook_pixel",
      "title": "Facebook pixel tracking id",
      "type": "text",
      "required": false,
      "help": "Bijvoorbeeld: XXXXXXXXXXXXXXXXX"
    },
    {
      "id": "facebook_pixel_cookie_type",
      "title": "Het cookie type van de Facebook pixel",
      "type": "dropdown",
      "multiple": false,
      "fields": [
        "marketing",
        "analytical",
        "social"
      ],
      "default": "marketing",
      "required": false,
      "help": "Indien de facebook pixel alleen wordt gebruikt voor analytics, kan je dat hiermee instellen"
    },
    {
      "id": "functional",
      "title": "functional cookies",
      "type": "boolean",
      "default": true,
      "help": "Cookies die er voor zorgen dat deze website naar behoren functioneert. Waaronder het toegang krijgen tot beschermde onderdelen van de website. Er zijn ook cookies voor geanonimiseerde analyse opgenomen."
    },
    {
      "id": "analytical",
      "title": "analytical cookies",
      "type": "boolean",
      "default": true,
      "help": "Cookies die informatie verzamelen zodat wij het gebruik van de website kunnen meten. Dit stelt ons in staat de structuur, navigatie en inhoud van de website zo gebruiksvriendelijk mogelijk voor je te maken."
    },
    {
      "id": "social",
      "title": "social cookies",
      "type": "boolean",
      "default": false,
      "help": "Cookies om de inhoud van onze website te delen via Social Media. Social Media netwerken doen aan profiling en tracking van bezoekers. Door deze cookies te accepteren kan je internetgedrag gemonitord worden door social media."
    },
    {
      "id": "marketing",
      "title": "marketing cookies",
      "type": "boolean",
      "default": false,
      "help": "Cookies waarmee advertenties kunnen worden afgestemd op jouw internetgedrag. Door deze cookies te accepteren kan je internetgedrag gemonitord worden door advertentie-netwerken."
    }
  ]
```

READ FIRST BEFORE CONTINUING:
-----------

In past installations we have seen that the ``script_location`` doesn't always matter for the following steps. And since we are to lazy to figgure out why, just try both event types.

A quick note on the ``script_location`` setting;

1. If you're setting this to "header" and you're using Google Tag Manager for Ecommerce tracking, make sure your Trigger "Event Type" is set to "Page View".
2. If you're setting this to "footer" and you're using Google Tag Manager for Ecommerce tracking, make sure your Trigger "Event Type" is set to "Page View - DOM Ready", otherwise it won't work.

More about this can be found here: [https://www.analyticsmania.com/post/ecommerce-tracking-with-google-tag-manager/](https://www.analyticsmania.com/post/ecommerce-tracking-with-google-tag-manager/)
