shimmer 0.0.31 → 0.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +30 -2
- data/lib/shimmer/form.rb +2 -2
- data/lib/shimmer/utils/config.rb +1 -1
- data/lib/shimmer/utils/file_proxy.rb +1 -1
- data/lib/shimmer/version.rb +1 -1
- data/src/consent.ts +35 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ec6558ea108274199f67686bd3ed4e17fc7444961efc50a3a21674744e5e0302
|
4
|
+
data.tar.gz: 8ab05c384e3b17405a2210626e30c888f5773f0fd600d4be81897c2a80fc6534
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 461261abeb5bcd085bc5278585c4532de6610eb4fb94287b04998c858e2462dcf3a0dff697140e7cd8018c1d72c5cfb22b84446f9a907a5536cd813b2020515f
|
7
|
+
data.tar.gz: 399f86cad6e17f651113d496fc385682bc5aa839d29c995e1bdab60113a5c47550635f05fcf96e5168dd7bf3a56cc39544a1423a9559e855d5a688e0c3fbf911
|
data/README.md
CHANGED
@@ -15,7 +15,7 @@ Stack is a reusable typed component that allows you to easily manage the layout
|
|
15
15
|
To use it in a React project, you can just import and use it as you would in a normal React component:
|
16
16
|
|
17
17
|
```js
|
18
|
-
import { Stack } from "@nerdgeschoss/shimmer/components/stack";
|
18
|
+
import { Stack } from "@nerdgeschoss/shimmer/dist/components/stack";
|
19
19
|
|
20
20
|
<Stack gapTablet={4} gapDesktop={12} line>
|
21
21
|
<div></div>
|
@@ -24,7 +24,7 @@ import { Stack } from "@nerdgeschoss/shimmer/components/stack";
|
|
24
24
|
</Stack>;
|
25
25
|
```
|
26
26
|
|
27
|
-
To use it in an HTML file, you can just import the css file directly from `@nerdgeschoss/shimmer/components/stack.css` and just implement the classes as they are in the stylesheet:
|
27
|
+
To use it in an HTML file, you can just import the css file directly from `@nerdgeschoss/shimmer/dist/components/stack.css` and just implement the classes as they are in the stylesheet:
|
28
28
|
|
29
29
|
```html
|
30
30
|
<div class="stack stack--line stack--tablet-4 stack--desktop-12">
|
@@ -283,6 +283,34 @@ before_action :check_locale
|
|
283
283
|
|
284
284
|
Trying to figure out which key a certain translation on the page has? Append `?debug` to the url and `I18n.debug?` will be set - which leads to keys being printed on the page.
|
285
285
|
|
286
|
+
### 🍪 Cookies
|
287
|
+
|
288
|
+
Integrate cookie consent and add tracking capabilities such as Google Tag Manager and Google Analytics to your application with the following steps:
|
289
|
+
|
290
|
+
**Include Shimmer's Consent Module**: Add the following line to your `application_controller.rb`:
|
291
|
+
|
292
|
+
```ruby
|
293
|
+
class ApplicationController < ActionController::Base
|
294
|
+
include Shimmer::Consent
|
295
|
+
end
|
296
|
+
```
|
297
|
+
|
298
|
+
**Add Google Tag Manager and Google Analytics**:
|
299
|
+
|
300
|
+
* If you wish to include Google Tag Manager or Google Analytics, insert either of the following lines to your `application.js`:
|
301
|
+
|
302
|
+
```typescript
|
303
|
+
ui.consent.enableGoogleTagManager(GOOGLE_TAG_MANAGER_ID);
|
304
|
+
```
|
305
|
+
|
306
|
+
```typescript
|
307
|
+
ui.consent.enableGoogleAnalytics(GOOGLE_ANALYTICS_ID);
|
308
|
+
```
|
309
|
+
|
310
|
+
Replace `GOOGLE_TAG_MANAGER_ID` with your Google Tag Manager ID or `GOOGLE_ANALYTICS_ID` with your Google Analytics ID.
|
311
|
+
|
312
|
+
**User Consent**: `Shimmer::Consent` provides a [stimulus controller](src/controllers/consent.ts) for creating a cookie banner. When the 'statistic' option is submitted to the controller, the necessary tracking scripts are added to the page's head.
|
313
|
+
|
286
314
|
## Installation
|
287
315
|
|
288
316
|
Add this line to your application's Gemfile:
|
data/lib/shimmer/form.rb
CHANGED
data/lib/shimmer/utils/config.rb
CHANGED
data/lib/shimmer/version.rb
CHANGED
data/src/consent.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { getCookie, setCookie } from "./util";
|
2
2
|
|
3
3
|
const consentCategories = ["essential", "targeting", "statistic"] as const;
|
4
|
-
export type ConsentCategory = typeof consentCategories[number];
|
4
|
+
export type ConsentCategory = (typeof consentCategories)[number];
|
5
5
|
|
6
6
|
export class Consent {
|
7
7
|
#consentListeners: Record<ConsentCategory, Array<() => void>> = {
|
@@ -63,4 +63,38 @@ export class Consent {
|
|
63
63
|
);
|
64
64
|
document.head.prepend(script);
|
65
65
|
}
|
66
|
+
|
67
|
+
async enableGoogleTagManager(
|
68
|
+
id: string,
|
69
|
+
role: ConsentCategory = "statistic"
|
70
|
+
): Promise<void> {
|
71
|
+
await this.consentFor(role);
|
72
|
+
window.gtag({
|
73
|
+
"gtm.start": new Date(),
|
74
|
+
event: "gtm.js",
|
75
|
+
});
|
76
|
+
window.gtag("config", id, { send_page_view: false }); // page view is disabled because it's tracked via the analytics stimulus controller already
|
77
|
+
const script = document.createElement("script");
|
78
|
+
script.async = true;
|
79
|
+
script.setAttribute(
|
80
|
+
"src",
|
81
|
+
`https://www.googletagmanager.com/gtm.js?id=${id}`
|
82
|
+
);
|
83
|
+
document.head.prepend(script);
|
84
|
+
|
85
|
+
// The following 'noscript' tag inclusion is primarily for compliance
|
86
|
+
// with Google's recommended installation procedure, its
|
87
|
+
// not technically necessary for functionality.
|
88
|
+
const noscript = document.createElement("noscript");
|
89
|
+
const iframe = document.createElement("iframe");
|
90
|
+
iframe.setAttribute(
|
91
|
+
"src",
|
92
|
+
`https://www.googletagmanager.com/ns.html?id=${id}`
|
93
|
+
);
|
94
|
+
iframe.setAttribute("height", "0");
|
95
|
+
iframe.setAttribute("width", "0");
|
96
|
+
iframe.setAttribute("style", "display:none;visibility:hidden");
|
97
|
+
noscript.appendChild(iframe);
|
98
|
+
document.body.prepend(noscript);
|
99
|
+
}
|
66
100
|
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: shimmer
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.33
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jens Ravens
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-
|
11
|
+
date: 2023-11-22 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email:
|