shimmer 0.0.31 → 0.0.32

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 779d79fb4df76a9a95f859cc5e5d0f42972518abd03a52e99f650258c2a309d1
-  data.tar.gz: d48baefb78dc663222646bd7cc98c6e6d15b2f8d76546e4f906fdd45aa61bab3
+  metadata.gz: 3a975bbc3e5b4c49127c435395b76802c7aa67de9ff4395b1fdc7727f3d31d3f
+  data.tar.gz: 1795a94caf3cd1464d72b79a91d8f481529adef7451c02d63cff2d7b4468efbd
 SHA512:
-  metadata.gz: 61ff05bdd88fd025936e51e3fef3847c9f7ef2141279e14bc508ae794e7bf149f81169835272504d8c8f7b93ccf459a0c4ce46c087ce4e0528e465c1870fe83a
-  data.tar.gz: 502f044707bf5049a79f8af12ee82d3a5aed421522085f761c5564318d96fdccc2c14ee63056b2b1ef948ad02a685c0db18e7cb09e420e8ba311926fb2bead70
+  metadata.gz: 13e3dec5b12662ea7d96fae419e15395f965936f9a5170bbfa071de7039785c96171a5e1dd78149f5e6035bd38f1119df81fe0292b3539bbb739c12f97b2f40f
+  data.tar.gz: 1375b6e3cd93a215f1c52645c5ea5403fb94c5fd8a56878b842811c1b6fef3368fd45dbd35365fc3201a614af7fe056c067720d5e7bbed7e65ea0fdc9483d341

data/README.md

@@ -15,7 +15,7 @@ Stack is a reusable typed component that allows you to easily manage the layout
 To use it in a React project, you can just import and use it as you would in a normal React component:
 
 ```js
-import { Stack } from "@nerdgeschoss/shimmer/components/stack";
+import { Stack } from "@nerdgeschoss/shimmer/dist/components/stack";
 
 <Stack gapTablet={4} gapDesktop={12} line>
   <div></div>
@@ -24,7 +24,7 @@ import { Stack } from "@nerdgeschoss/shimmer/components/stack";
 </Stack>;
 ```
 
-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:
+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:
 
 ```html
 <div class="stack stack--line stack--tablet-4 stack--desktop-12">
@@ -283,6 +283,34 @@ before_action :check_locale
 
 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.
 
+### 🍪 Cookies
+
+Integrate cookie consent and add tracking capabilities such as Google Tag Manager and Google Analytics to your application with the following steps:
+
+**Include Shimmer's Consent Module**: Add the following line to your `application_controller.rb`:
+
+```ruby
+class ApplicationController < ActionController::Base
+  include Shimmer::Consent
+end
+```
+
+**Add Google Tag Manager and Google Analytics**:
+
+*   If you wish to include Google Tag Manager or Google Analytics, insert either of the following lines to your `application.js`:
+
+```typescript
+ui.consent.enableGoogleTagManager(GOOGLE_TAG_MANAGER_ID);
+```
+
+```typescript
+ui.consent.enableGoogleAnalytics(GOOGLE_ANALYTICS_ID);
+```
+
+Replace `GOOGLE_TAG_MANAGER_ID` with your Google Tag Manager ID or `GOOGLE_ANALYTICS_ID` with your Google Analytics ID.
+
+**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.
+
 ## Installation
 
 Add this line to your application's Gemfile:

data/lib/shimmer/form.rb

@@ -5,8 +5,8 @@ module Shimmer
   end
 end
 
-require_relative "./form/builder"
-require_relative "./form/field"
+require_relative "form/builder"
+require_relative "form/field"
 
 Dir["#{File.expand_path("./form", __dir__)}/*"].sort.each do |e|
   require e

data/lib/shimmer/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Shimmer
-  VERSION = "0.0.31"
+  VERSION = "0.0.32"
 end

data/src/consent.ts

@@ -1,7 +1,7 @@
 import { getCookie, setCookie } from "./util";
 
 const consentCategories = ["essential", "targeting", "statistic"] as const;
-export type ConsentCategory = typeof consentCategories[number];
+export type ConsentCategory = (typeof consentCategories)[number];
 
 export class Consent {
   #consentListeners: Record<ConsentCategory, Array<() => void>> = {
@@ -63,4 +63,38 @@ export class Consent {
     );
     document.head.prepend(script);
   }
+
+  async enableGoogleTagManager(
+    id: string,
+    role: ConsentCategory = "statistic"
+  ): Promise<void> {
+    await this.consentFor(role);
+    window.gtag({
+      "gtm.start": new Date(),
+      event: "gtm.js",
+    });
+    window.gtag("config", id, { send_page_view: false }); // page view is disabled because it's tracked via the analytics stimulus controller already
+    const script = document.createElement("script");
+    script.async = true;
+    script.setAttribute(
+      "src",
+      `https://www.googletagmanager.com/gtm.js?id=${id}`
+    );
+    document.head.prepend(script);
+
+    // The following 'noscript' tag inclusion is primarily for compliance
+    // with Google's recommended installation procedure, its
+    // not technically necessary for functionality.
+    const noscript = document.createElement("noscript");
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute(
+      "src",
+      `https://www.googletagmanager.com/ns.html?id=${id}`
+    );
+    iframe.setAttribute("height", "0");
+    iframe.setAttribute("width", "0");
+    iframe.setAttribute("style", "display:none;visibility:hidden");
+    noscript.appendChild(iframe);
+    document.body.prepend(noscript);
+  }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shimmer
 version: !ruby/object:Gem::Version
-  version: 0.0.31
+  version: 0.0.32
 platform: ruby
 authors:
 - Jens Ravens
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2023-08-19 00:00:00.000000000 Z
+date: 2023-10-25 00:00:00.000000000 Z
 dependencies: []
 description: 
 email: