@@ -5,12 +5,12 @@ template: overrides/main.html
5
5
# Setting up site analytics
6
6
7
7
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 ] .
11
11
12
12
[ 1 ] : https://developers.google.com/analytics
13
- [ 2 ] : #other-analytics-providers
13
+ [ 2 ] : #cookie-consent
14
14
15
15
## Configuration
16
16
@@ -63,69 +63,122 @@ yourself, [this tutorial][4] might be a good start._
63
63
### Cookie consent
64
64
65
65
[ :octicons-file-code-24: Source] [ 5 ] ·
66
- :octicons-beaker -24: Experimental ·
66
+ :octicons-milestone -24: Default: _ none _ ·
67
67
[ :octicons-heart-fill-24:{ .mdx-heart } Insiders only] [ 5 ] { .mdx-insiders }
68
68
69
69
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 ` :
72
72
73
73
``` yaml
74
74
extra :
75
75
consent :
76
76
title : Cookie consent
77
- description : >
77
+ description : > # (1)
78
78
We use cookies to recognize your repeated visits and preferences, as well
79
79
as to measure the effectiveness of our documentation and whether users
80
80
find what they're searching for. With your consent, you're helping us to
81
81
make our documentation better.
82
82
` ` `
83
83
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
+
84
116
When a user first visits your site, a cookie consent form is rendered :
85
117
86
- [![With tabs][6 ]][6 ]
118
+ [![With tabs][7 ]][7 ]
87
119
88
120
[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
95
123
96
124
# # Customization
97
125
98
- # ## Other analytics providers
126
+ # ## Custom site analytics
99
127
100
128
[:octicons-file-code-24 : Source][3] ·
101
- :octicons-mortar-board-24 : Difficulty: _easy_
129
+ :octicons-mortar-board-24 : Difficulty: _moderate_
102
130
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` :
106
135
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)
111
141
` ` `
112
142
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
115
150
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,
117
154
which will emit the current `URL` to listen for navigation events and register
118
155
a page view event with :
119
156
120
157
` ` ` js
121
158
location$.subscribe(function(url) {
122
- /* Add custom page event tracking here */
159
+ /* Track a page event */
123
160
})
124
161
` ` `
125
162
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
+ ` ` `
129
183
130
- [9] : setting-up-navigation.md#instant-loading
131
- [10] : ../customization.md#additional-javascript
184
+ [12] : # cookie-consent
0 commit comments