shimmer 0.0.31 → 0.0.32
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +30 -2
- data/lib/shimmer/form.rb +2 -2
- 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: 3a975bbc3e5b4c49127c435395b76802c7aa67de9ff4395b1fdc7727f3d31d3f
|
4
|
+
data.tar.gz: 1795a94caf3cd1464d72b79a91d8f481529adef7451c02d63cff2d7b4468efbd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 13e3dec5b12662ea7d96fae419e15395f965936f9a5170bbfa071de7039785c96171a5e1dd78149f5e6035bd38f1119df81fe0292b3539bbb739c12f97b2f40f
|
7
|
+
data.tar.gz: 1375b6e3cd93a215f1c52645c5ea5403fb94c5fd8a56878b842811c1b6fef3368fd45dbd35365fc3201a614af7fe056c067720d5e7bbed7e65ea0fdc9483d341
|
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/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.32
|
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-10-25 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email:
|