Skip to content

Commit 0bbcdd4

Browse files
committed
Updated cookie consent documentation
1 parent c843fc7 commit 0bbcdd4

File tree

1 file changed

+86
-33
lines changed

1 file changed

+86
-33
lines changed

Diff for: docs/setup/setting-up-site-analytics.md

+86-33
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ template: overrides/main.html
55
# Setting up site analytics
66

77
As with any other service offered on the web, understanding how your project
8-
documentation is actually used can be an essential success factor. While
9-
Material for MkDocs natively integrates with [Google Analytics][1], [other
10-
analytics providers][2] can be used, too.
8+
documentation is actually used can be an essential success factor. Material for
9+
MkDocs natively integrates with [Google Analytics][1] and offers a customizable
10+
and extendable [cookie consent][2].
1111

1212
[1]: https://developers.google.com/analytics
13-
[2]: #other-analytics-providers
13+
[2]: #cookie-consent
1414

1515
## Configuration
1616

@@ -63,69 +63,122 @@ yourself, [this tutorial][4] might be a good start._
6363
### Cookie consent
6464

6565
[:octicons-file-code-24: Source][5] ·
66-
:octicons-beaker-24: Experimental ·
66+
:octicons-milestone-24: Default: _none_ ·
6767
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][5]{ .mdx-insiders }
6868

6969
Material for MkDocs ships a native and extensible cookie consent form, which
70-
when enabled will ask the user for his consent prior to sending analytics.
71-
Add the following to `mkdocs.yml`:
70+
asks the user for his consent prior to setting up analytics. Add the following
71+
to `mkdocs.yml`:
7272

7373
``` yaml
7474
extra:
7575
consent:
7676
title: Cookie consent
77-
description: >
77+
description: > # (1)
7878
We use cookies to recognize your repeated visits and preferences, as well
7979
as to measure the effectiveness of our documentation and whether users
8080
find what they're searching for. With your consent, you're helping us to
8181
make our documentation better.
8282
```
8383
84+
1. You can add arbitrary HTML tags in the `description`, e.g. to link to your
85+
terms of service or other parts of the site.
86+
87+
Note that both, `title` and `description`, are required. If Google Analytics was
88+
configured via `mkdocs.yml`, the cookie consent will automatically include a
89+
setting for the user to disable it. Furthermore, [custom cookies][6] can be
90+
integrated by using the `cookies` field:
91+
92+
=== "Change cookie name"
93+
94+
``` yaml
95+
extra:
96+
consent:
97+
cookies:
98+
analytics: Custom name # (1)
99+
```
100+
101+
1. The default name of the `analytics` cookie is `Google Analytics`.
102+
103+
=== "Add custom cookie"
104+
105+
``` yaml
106+
extra:
107+
consent:
108+
cookies:
109+
analytics: Google Analytics # (1)
110+
custom: Custom cookie
111+
```
112+
113+
1. If you add a custom cookie to the `cookies` field, the `analytics` cookie
114+
must be added back explicitly, or analytics won't be triggered.
115+
84116
When a user first visits your site, a cookie consent form is rendered:
85117

86-
[![With tabs][6]][6]
118+
[![With tabs][7]][7]
87119

88120
[5]: ../insiders/index.md
89-
[6]: ../assets/screenshots/consent.png
90-
91-
_Let's get this feature out of the experimental status! You are encouraged to
92-
share your feedback in #1914, so we can provide the necessary configuration
93-
options for easy customizations. If you wish to customize it today, you can
94-
override_ `partials/consent.html`.
121+
[6]: #custom-cookies
122+
[7]: ../assets/screenshots/consent.png
95123

96124
## Customization
97125

98-
### Other analytics providers
126+
### Custom site analytics
99127

100128
[:octicons-file-code-24: Source][3] ·
101-
:octicons-mortar-board-24: Difficulty: _easy_
129+
:octicons-mortar-board-24: Difficulty: _moderate_
102130

103-
In order to integrate another analytics service provider offering an
104-
asynchronous JavaScript-based tracking solution, you can [extend the theme][7]
105-
and [override the `analytics` block][8]:
131+
In order to integrate another analytics service provider offering a
132+
JavaScript-based tracking solution, you can [extend the theme][8] and add a new
133+
`custom.html` partial [here][9]. The name of the partial can then be used to
134+
configure the custom integration from `mkdocs.yml`:
106135

107-
``` html
108-
{% block analytics %}
109-
<!-- Add custom analytics integration here -->
110-
{% endblock %}
136+
``` yaml
137+
extra:
138+
analytics:
139+
provider: custom # (1)
140+
key: value # (2)
111141
```
112142

113-
[7]: ../customization.md#extending-the-theme
114-
[8]: ../customization.md#overriding-blocks-recommended
143+
1. Of course, you can change the name to the partial to anything you like.
144+
2. You can add arbitrary `key` and `value` combinations to configure your custom
145+
integration. This is especially useful if you're sharing the custom
146+
integration across multiple repositories.
147+
148+
[8]: ../customization.md#extending-the-theme
149+
[9]: https://github.com/squidfunk/mkdocs-material/tree/master/src/partials/integrations/analytics
115150

116-
If you're using [instant loading][9], you may use the `location$` observable,
151+
#### Instant loading
152+
153+
If you're using [instant loading][10], you may use the `location$` observable,
117154
which will emit the current `URL` to listen for navigation events and register
118155
a page view event with:
119156

120157
``` js
121158
location$.subscribe(function(url) {
122-
/* Add custom page event tracking here */
159+
/* Track a page event */
123160
})
124161
```
125162

126-
Note that this must be integrated with [additional JavaScript][10], and cannot be
127-
included as part of the `analytics` block, as it is included in the `head` of
128-
the document.
163+
Note that this must be integrated with [additional JavaScript][11].
164+
165+
[10]: setting-up-navigation.md#instant-loading
166+
[11]: ../customization.md#additional-javascript
167+
168+
### Custom cookies
169+
170+
[:octicons-file-code-24: Source][3] ·
171+
:octicons-mortar-board-24: Difficulty: _moderate_
172+
173+
If you've customized the [cookie consent][12] and added a `custom` cookie, the
174+
user will be prompted to accept your custom cookie. Use
175+
[additional JavaScript][11] to check whether the user accepted it:
176+
177+
``` js
178+
var consent = __md_get("__consent")
179+
if (consent && consent.custom) {
180+
/* The user accepted the cookie */
181+
}
182+
```
129183

130-
[9]: setting-up-navigation.md#instant-loading
131-
[10]: ../customization.md#additional-javascript
184+
[12]: #cookie-consent

0 commit comments

Comments
 (0)