Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adjustments to consent storage to prevent cache-busting #122

Merged
merged 3 commits into from
Sep 13, 2023
Merged

adjustments to consent storage to prevent cache-busting #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
584ee54
adjustments to consent storage to prevent cache-busting
jberghoef Sep 12, 2023
b4d188e
reformat code
jberghoef Sep 12, 2023
412ebae
replace wagtail.contrib.modeladmin with wagtail_modeladmin
jberghoef Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 69 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,40 @@ _In this package the term "tag" is being used for code snippets being injected
into HTML. This is not to be confused with tags used to identify content in the
CMS, such as pictures and documents._

## ‼️ Breaking changes

As of version 2.0, consent is stored differently in the `wtm` cookie. The reason for this change is
to prevent so-called "cache-busting" and only refresh the WTM cookie after a certain period of time
(specified in [`WTM_COOKIE_REFRESH`](#wtm_cookie_refresh)).
The cookie will now contain a `base64` and `uri` encoded JSON string which stores both the consent state
and additional information. Old versions of the cookie
(e.g. `necessary:true|preferences:unset|statistics:pending|marketing:false`) will automatically be
upgraded when detected. Once decoded, it will look something like this:

```json
{
"meta": {
"id": "b402114a-352f-488f-8481-834cd91a1b2b",
"refresh_timestamp": 1694520568.531865,
"set_timestamp": 1694520573.685324
},
"state": {
"necessary": "true",
"preferences": "unset",
"statistics": "pending",
"marketing": "false"
}
}
```

To easily parse the cookie using JavaScript, you can use this code snippet:

```js
const { meta, state } = JSON.parse(atob(decodeURIComponent(cookie_content_goes_here)));
```

You can ready more on how to easily access this state from your front-end [here](#wtm_inject_script).

## Features

Wagtail Tag Manager offers functionality similar to platforms like
Expand Down Expand Up @@ -68,6 +102,7 @@ to inject tags into a page before the response is send to a client.
- [`WTM_INJECT_TAGS`](#wtm_inject_tags)
- [`WTM_MANAGE_VIEW`](#wtm_manage_view)
- [`WTM_COOKIE_EXPIRE`](#wtm_cookie_expire)
- [`WTM_COOKIE_REFRESH`](#wtm_cookie_refresh)
- [`WTM_CACHE_TIMEOUT`](#wtm_cache_timeout)
- [`WTM_PRESERVE_VARIABLES`](#wtm_preserve_variables)
- [`WTM_INJECT_STYLE`](#wtm_inject_style)
Expand Down Expand Up @@ -101,11 +136,11 @@ change the text shown in the cookie bar.

## Requirements

| Package | Version(s) |
| ------- | ------------------------------------------------- |
| Django | 2.2, 3.0, 3.1, 3.2, 4.0, 4.1 |
| Wagtail | 2.11, 2.12, 2.13, 2.14, 2.15, 2.16, 3.0, 4.0, 4.1 |
| Python | 3.7, 3.8, 3.9, 3.10, 3.11 |
| Package | Version(s) |
| ------- | -------------------- |
| Django | 3.2, 4.0, 4.1, 4.2 |
| Wagtail | 4.1, 4.2, 5.0. 5.1 |
| Python | 3.8, 3.9, 3.10, 3.11 |

## Instructions

Expand All @@ -120,7 +155,7 @@ pip install wagtail-tag-manager
```python
INSTALLED_APPS = [
# ...
'wagtail.contrib.modeladmin',
'wagtail_modeladmin',
'wagtail_tag_manager',
# ...
]
Expand Down Expand Up @@ -360,6 +395,15 @@ WTM_COOKIE_EXPIRE = 365
Sets the expiration time in days of WTM's cookies. Notice that this is only
applicable to the consent cookies used by WTM, not any cookies placed by tags.

### `WTM_COOKIE_REFRESH`

```python
WTM_COOKIE_REFRESH = 30
```

Sets the refresh time in days of WTM's cookies. Notice that this is only
applicable to the consent cookies used by WTM, not any cookies placed by tags.

### `WTM_CACHE_TIMEOUT`

```python
Expand Down Expand Up @@ -397,7 +441,25 @@ WTM_INJECT_SCRIPT = True

Change to `False` to prevent WTM's included scripts from loading. This is
useful if you don't want to use the inlcuded lazy loading and cookie bar
functionality.
functionality. While enabled, the script will expose the `window.wtm.consent()`
function. When called, the function will retrieve the current consent state
and information from the `wtm` cookie. This will like something like this:

```json
{
"meta": {
"id": "b402114a-352f-488f-8481-834cd91a1b2b",
"refresh_timestamp": 1694520568.531865,
"set_timestamp": 1694520573.685324
},
"state": {
"marketing": "false",
"necessary": "true",
"preferences": "true",
"statistics": "true"
}
}
```

### `WTM_SUMMARY_PANELS`

Expand Down
135 changes: 93 additions & 42 deletions cypress/e2e/cookie_bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
beforeEach("clear wtm cookies", () => {
cy.clearCookie("wtm", { timeout: 1000 });
cy.clearCookie("wtm_id", { timeout: 1000 });
});

describe("The cookie bar", () => {
Expand All @@ -11,15 +10,19 @@ describe("The cookie bar", () => {

cy.get("#wtm_cookie_bar").should("have.class", "hidden").should("not.be.visible");

cy.getCookie("wtm").should(
"have.property",
"value",
"necessary:true|preferences:true|statistics:true|marketing:false"
);
cy.getCookie("wtm_id").should("exist");
cy.getConsent().should((consent) => {
expect(consent).to.deep.contain({
state: {
necessary: "true",
preferences: "true",
statistics: "true",
marketing: "false",
},
});
});
});

it("can set only necesarry cookies", () => {
it("can set only necessary cookies", () => {
cy.visit("/");

cy.get("#wtm_cookie_bar").should("be.visible");
Expand All @@ -29,12 +32,16 @@ describe("The cookie bar", () => {

cy.get("#wtm_cookie_bar").should("have.class", "hidden").should("not.be.visible");

cy.getCookie("wtm").should(
"have.property",
"value",
"necessary:true|preferences:false|statistics:false|marketing:false"
);
cy.getCookie("wtm_id").should("exist");
cy.getConsent().should((consent) => {
expect(consent).to.deep.contain({
state: {
necessary: "true",
preferences: "false",
statistics: "false",
marketing: "false",
},
});
});
});

it("can set only preference cookies", () => {
Expand All @@ -46,12 +53,16 @@ describe("The cookie bar", () => {

cy.get("#wtm_cookie_bar").should("have.class", "hidden").should("not.be.visible");

cy.getCookie("wtm").should(
"have.property",
"value",
"necessary:true|preferences:true|statistics:false|marketing:false"
);
cy.getCookie("wtm_id").should("exist");
cy.getConsent().should((consent) => {
expect(consent).to.deep.contain({
state: {
necessary: "true",
preferences: "true",
statistics: "false",
marketing: "false",
},
});
});
});

it("can set only statistical cookies", () => {
Expand All @@ -63,12 +74,16 @@ describe("The cookie bar", () => {

cy.get("#wtm_cookie_bar").should("have.class", "hidden").should("not.be.visible");

cy.getCookie("wtm").should(
"have.property",
"value",
"necessary:true|preferences:false|statistics:true|marketing:false"
);
cy.getCookie("wtm_id").should("exist");
cy.getConsent().should((consent) => {
expect(consent).to.deep.contain({
state: {
necessary: "true",
preferences: "false",
statistics: "true",
marketing: "false",
},
});
});
});

it("can set only marketing cookies", () => {
Expand All @@ -82,12 +97,16 @@ describe("The cookie bar", () => {

cy.get("#wtm_cookie_bar").should("have.class", "hidden").should("not.be.visible");

cy.getCookie("wtm").should(
"have.property",
"value",
"necessary:true|preferences:false|statistics:false|marketing:true"
);
cy.getCookie("wtm_id").should("exist");
cy.getConsent().should((consent) => {
expect(consent).to.deep.contain({
state: {
necessary: "true",
preferences: "false",
statistics: "false",
marketing: "true",
},
});
});
});

it("can enable all cookies", () => {
Expand All @@ -99,34 +118,66 @@ describe("The cookie bar", () => {

cy.get("#wtm_cookie_bar").should("have.class", "hidden").should("not.be.visible");

cy.getCookie("wtm").should(
"have.property",
"value",
"necessary:true|preferences:true|statistics:true|marketing:true"
);
cy.getCookie("wtm_id").should("exist");
cy.getConsent().should((consent) => {
expect(consent).to.deep.contain({
state: {
necessary: "true",
preferences: "true",
statistics: "true",
marketing: "true",
},
});
});
});

it("is displayed when preference cookies are 'unset'", () => {
cy.setCookie("wtm", "necessary:true|preferences:unset|statistics:false|marketing:false");
cy.setConsent({
state: {
necessary: "true",
preferences: "unset",
statistics: "false",
marketing: "false",
},
});
cy.visit("/");
cy.get("#wtm_cookie_bar").should("not.have.class", "hidden").should("be.visible");
});

it("is displayed when statistical cookies are 'unset'", () => {
cy.setCookie("wtm", "necessary:true|preferences:false|statistics:unset|marketing:false");
cy.setConsent({
state: {
necessary: "true",
preferences: "false",
statistics: "unset",
marketing: "false",
},
});
cy.visit("/");
cy.get("#wtm_cookie_bar").should("not.have.class", "hidden").should("be.visible");
});

it("is hidden when all cookies are 'false'", () => {
cy.setCookie("wtm", "necessary:true|preferences:false|statistics:false|marketing:false");
cy.setConsent({
state: {
necessary: "true",
preferences: "false",
statistics: "false",
marketing: "false",
},
});
cy.visit("/");
cy.get("#wtm_cookie_bar").should("have.class", "hidden").should("not.be.visible");
});

it("is hidden when all cookies are 'true'", () => {
cy.setCookie("wtm", "necessary:true|preferences:true|statistics:true|marketing:true");
cy.setConsent({
state: {
necessary: "true",
preferences: "true",
statistics: "true",
marketing: "true",
},
});
cy.visit("/");
cy.get("#wtm_cookie_bar").should("have.class", "hidden").should("not.be.visible");
});
Expand Down
Loading