@porscheofficial/cookie-consent-banner - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

dist/cjs/cookie-consent-banner.cjs.entry.js

@@ -101,2 +101,7 @@ 'use strict';
   }
+  handleEssentialsOnly() {
+    const mandatoryCategories = this.availableCategories.filter((category) => category.isMandatory);
+    this.acceptedCategoriesNext = mandatoryCategories.map((category) => category.key);
+    this.persistSelection();
+  }
   /* eslint-disable-next-line @typescript-eslint/explicit-member-accessibility,@typescript-eslint/member-ordering */
@@ -122,3 +127,3 @@ render() {
     })))), index.h("div", { class: "cc_buttons" }, Boolean(this.isShownSettings) && (index.h("button", { type: "submit", class: "secondary", onClick: () => this.persistSelection(), onKeyPress: () => this.persistSelection() }, this.btnLabelPersistSelectionAndContinue)), !this.isShownSettings &&
-      !!this.btnLabelOnlyEssentialAndContinue && (index.h("button", { class: "secondary", type: "button", onClick: () => this.persistSelection(), onKeyPress: () => this.persistSelection() }, this.btnLabelOnlyEssentialAndContinue)), index.h("button", { onClick: () => this.handleAcceptAll(), onKeyPress: () => this.handleAcceptAll(), type: "button" }, !this.isShownSettings
+      !!this.btnLabelOnlyEssentialAndContinue && (index.h("button", { class: "secondary", type: "button", onClick: () => this.handleEssentialsOnly(), onKeyPress: () => this.handleEssentialsOnly() }, this.btnLabelOnlyEssentialAndContinue)), index.h("button", { onClick: () => this.handleAcceptAll(), onKeyPress: () => this.handleAcceptAll(), type: "button" }, !this.isShownSettings
       ? this.btnLabelAcceptAndContinue
@@ -125,0 +130,0 @@ : this.btnLabelSelectAllAndContinue))))));

dist/collection/components/cookie-consent-banner/cookie-consent-banner.js

@@ -93,2 +93,7 @@ /* eslint-disable @typescript-eslint/no-unsafe-return,no-unused-vars,@typescript-eslint/no-unused-vars */
   }
+  handleEssentialsOnly() {
+    const mandatoryCategories = this.availableCategories.filter((category) => category.isMandatory);
+    this.acceptedCategoriesNext = mandatoryCategories.map((category) => category.key);
+    this.persistSelection();
+  }
   /* eslint-disable-next-line @typescript-eslint/explicit-member-accessibility,@typescript-eslint/member-ordering */
@@ -130,3 +135,3 @@ render() {
             !this.isShownSettings &&
-              !!this.btnLabelOnlyEssentialAndContinue && (h("button", { class: "secondary", type: "button", onClick: () => this.persistSelection(), onKeyPress: () => this.persistSelection() }, this.btnLabelOnlyEssentialAndContinue)),
+              !!this.btnLabelOnlyEssentialAndContinue && (h("button", { class: "secondary", type: "button", onClick: () => this.handleEssentialsOnly(), onKeyPress: () => this.handleEssentialsOnly() }, this.btnLabelOnlyEssentialAndContinue)),
             h("button", { onClick: () => this.handleAcceptAll(), onKeyPress: () => this.handleAcceptAll(), type: "button" }, !this.isShownSettings
@@ -133,0 +138,0 @@ ? this.btnLabelAcceptAndContinue

dist/cookie-consent-banner/cookie-consent-banner.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as n}from"./p-e7f6a792.js";(()=>{const n=import.meta.url,t={};return""!==n&&(t.resourcesUrl=new URL(".",n).href),e(t)})().then((e=>n([["p-8953e525",[[1,"cookie-consent-banner",{availableCategories:[16],cookieName:[1,"cookie-name"],cookieDomain:[1,"cookie-domain"],disableResetSiteCookiesOnConsentWithdrawn:[4,"disable-reset-site-cookies-on-consent-withdrawn"],headline:[1],btnLabelAcceptAndContinue:[1,"btn-label-accept-and-continue"],btnLabelOnlyEssentialAndContinue:[1,"btn-label-only-essential-and-continue"],btnLabelSelectAllAndContinue:[1,"btn-label-select-all-and-continue"],btnLabelPersistSelectionAndContinue:[1,"btn-label-persist-selection-and-continue"],contentSettingsDescription:[1,"content-settings-description"],handlePreferencesRestored:[16],handlePreferencesUpdated:[16],isShown:[32],acceptedCategoriesNext:[32],acceptedCategoriesPersisted:[32],isShownSettings:[32]},[[4,"cookie_consent_show","eventListenerShow"],[4,"cookie_consent_details_show","eventListenerDetailsShow"]]]]]],e)));
+import{p as e,b as n}from"./p-e7f6a792.js";(()=>{const n=import.meta.url,t={};return""!==n&&(t.resourcesUrl=new URL(".",n).href),e(t)})().then((e=>n([["p-d540ff40",[[1,"cookie-consent-banner",{availableCategories:[16],cookieName:[1,"cookie-name"],cookieDomain:[1,"cookie-domain"],disableResetSiteCookiesOnConsentWithdrawn:[4,"disable-reset-site-cookies-on-consent-withdrawn"],headline:[1],btnLabelAcceptAndContinue:[1,"btn-label-accept-and-continue"],btnLabelOnlyEssentialAndContinue:[1,"btn-label-only-essential-and-continue"],btnLabelSelectAllAndContinue:[1,"btn-label-select-all-and-continue"],btnLabelPersistSelectionAndContinue:[1,"btn-label-persist-selection-and-continue"],contentSettingsDescription:[1,"content-settings-description"],handlePreferencesRestored:[16],handlePreferencesUpdated:[16],isShown:[32],acceptedCategoriesNext:[32],acceptedCategoriesPersisted:[32],isShownSettings:[32]},[[4,"cookie_consent_show","eventListenerShow"],[4,"cookie_consent_details_show","eventListenerDetailsShow"]]]]]],e)));

dist/esm/cookie-consent-banner.entry.js

@@ -97,2 +97,7 @@ import { r as registerInstance, c as createEvent, h } from './index-6c3638be.js';
   }
+  handleEssentialsOnly() {
+    const mandatoryCategories = this.availableCategories.filter((category) => category.isMandatory);
+    this.acceptedCategoriesNext = mandatoryCategories.map((category) => category.key);
+    this.persistSelection();
+  }
   /* eslint-disable-next-line @typescript-eslint/explicit-member-accessibility,@typescript-eslint/member-ordering */
@@ -118,3 +123,3 @@ render() {
     })))), h("div", { class: "cc_buttons" }, Boolean(this.isShownSettings) && (h("button", { type: "submit", class: "secondary", onClick: () => this.persistSelection(), onKeyPress: () => this.persistSelection() }, this.btnLabelPersistSelectionAndContinue)), !this.isShownSettings &&
-      !!this.btnLabelOnlyEssentialAndContinue && (h("button", { class: "secondary", type: "button", onClick: () => this.persistSelection(), onKeyPress: () => this.persistSelection() }, this.btnLabelOnlyEssentialAndContinue)), h("button", { onClick: () => this.handleAcceptAll(), onKeyPress: () => this.handleAcceptAll(), type: "button" }, !this.isShownSettings
+      !!this.btnLabelOnlyEssentialAndContinue && (h("button", { class: "secondary", type: "button", onClick: () => this.handleEssentialsOnly(), onKeyPress: () => this.handleEssentialsOnly() }, this.btnLabelOnlyEssentialAndContinue)), h("button", { onClick: () => this.handleAcceptAll(), onKeyPress: () => this.handleAcceptAll(), type: "button" }, !this.isShownSettings
       ? this.btnLabelAcceptAndContinue
@@ -121,0 +126,0 @@ : this.btnLabelSelectAllAndContinue))))));

dist/types/components/cookie-consent-banner/cookie-consent-banner.d.ts

@@ -31,3 +31,4 @@ import { EventEmitter, JSX } from "../../stencil-public-runtime";
   private handleAcceptAll;
+  private handleEssentialsOnly;
   render(): JSX.Element;
 }

package.json

 {
   "name": "@porscheofficial/cookie-consent-banner",
   "license": "MIT",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "repository": {
@@ -50,3 +50,3 @@ "type": "git",
     "@types/puppeteer": "5.4.4",
-    "eslint": "8.3.0",
+    "eslint": "8.7.0",
     "jest": "26.6.3",
@@ -53,0 +53,0 @@ "jest-cli": "26.6.3",

README.md

@@ -24,3 +24,5 @@ <div align="center">
   - [Styling](#styling)
-- [Real World Example](#rocket-real-world-example)
+- [Real World Examples](#rocket-real-world-examples)
+  - [with Tag Manager](#with-tag-manager)
+  - [without Tag Manager](#without-tag-manager)
 - [Disclaimer](#disclaimer)
@@ -134,4 +136,6 @@ - [License](#license)
 
-## :rocket: Real World Example
+## :rocket: Real World Examples
 
+### ...with Tag Manager
+
 This example shows how the component could be integrated into your web application by leveraging the features of a tag manager.
@@ -146,3 +150,3 @@ The tag manager is not loaded as long as there is no consent given.
   type="module"
-  src="https://unpkg.com/@porscheofficial/cookie-consent-banner@1.0.0/dist/cookie-consent-banner/cookie-consent-banner.esm.js"
+  src="https://unpkg.com/@porscheofficial/cookie-consent-banner@2.1.0/dist/cookie-consent-banner/cookie-consent-banner.esm.js"
 ></script>
@@ -253,2 +257,146 @@ <!-- Update Styles-->
 
+### ...without Tag Manager
+
+This example shows how the component could be integrated into your web application without leveraging the features of a tag manager.
+The scripts are not loaded as long as there is no consent given.
+Once the visitor stores the consent settings, two things happen: The consent data is stored as a cookie `cookies_accepted_categories` and the script elements are added to the page.
+
+```html
+<!-- Import Web Component -->
+<script
+  type="module"
+  src="https://unpkg.com/@porscheofficial/cookie-consent-banner@2.1.0/dist/cookie-consent-banner/cookie-consent-banner.esm.js"
+></script>
+<!-- Update Styles-->
+<style>
+  :root {
+    --cookie-consent-banner-z-index-container: 101;
+    --cookie-consent-banner-colors-primary: rgba(0, 255, 255, 0.82);
+    --cookie-consent-banner-colors-primary-border: var(
+      --cookie-consent-banner-colors-primary
+    );
+    --cookie-consent-banner-colors-primary-content: #fff;
+
+    --cookie-consent-banner-border-radius-buttons: 100px;
+    --cookie-consent-banner-border-radius-body: 0;
+
+    --cookie-consent-banner-spacings-container-padding-top: 0;
+    --cookie-consent-banner-spacings-container-padding-left: 0;
+    --cookie-consent-banner-spacings-container-padding-bottom: 0;
+    --cookie-consent-banner-spacings-container-padding-right: 0;
+  }
+</style>
+
+<!-- Init Web Component -->
+<cookie-consent-banner
+  btn-label-accept-and-continue="Agree and continue"
+  btn-label-only-essential-and-continue="Continue with technically required cookies only"
+  btn-label-persist-selection-and-continue="Save selection and continue"
+  btn-label-select-all-and-continue="Select all and continue"
+  content-settings-description="You can decide which cookies are used by selecting the respective options below. Please note that your selection may impair in the functionality of the service."
+>
+  We use cookies and similar technologies to provide certain features, enhance
+  the user experience and deliver content that is relevant to your interests.
+  Depending on their purpose, analysis and marketing cookies may be used in
+  addition to technically necessary cookies. By clicking on "Agree and
+  continue", you declare your consent to the use of the aforementioned cookies.
+  <a
+    href="javascript:document.dispatchEvent(new Event('cookie_consent_details_show'))"
+  >
+    Here
+  </a>
+  you can make detailed settings or revoke your consent (in part if necessary)
+  with effect for the future. For further information, please refer to our
+  <a href="/privacy-policy">Privacy Policy</a>
+  .
+</cookie-consent-banner>
+
+<!-- Open Banner again -->
+<a href="javascript:document.dispatchEvent(new Event('cookie_consent_show'))">
+  Show Cookie Consent Settings
+</a>
+
+<script>
+  /* Update available Cookie Categories */
+  const cookieConsentBannerElement = document.querySelector(
+    "cookie-consent-banner"
+  );
+  cookieConsentBannerElement.availableCategories = [
+    {
+      description:
+        "Enable you to navigate and use the basic functions and to store preferences.",
+      key: "technically_required",
+      label: "Technically necessary cookies",
+      isMandatory: true,
+    },
+    {
+      description:
+        "Enable us to determine how visitors interact with our service in order to improve the user experience.",
+      key: "analytics",
+      label: "Analysis cookies",
+    },
+    {
+      description:
+        "Enable us to offer and evaluate relevant content and interest-based advertising.",
+      key: "marketing",
+      label: "Marketing cookies",
+    },
+  ];
+</script>
+
+<script>
+  // =========================================================================
+  // EXAMPLE
+  // ANALYTICS w/o TAG MANAGER
+  // =========================================================================
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag("js", new Date());
+
+  gtag("config", "ENTERID");
+
+  function loadAnalyticsScript() {
+    // Add Script only once
+    const scriptElementExists = document.querySelector("[data-scriptid='ga']");
+    if (scriptElementExists || window?.ga) return;
+
+    const firstScriptElement = document.getElementsByTagName("script")[0];
+
+    const scriptElement = document.createElement("script");
+    scriptElement.type = "text/javascript";
+    scriptElement.setAttribute("async", "true");
+    scriptElement.setAttribute(
+      "src",
+      "https://www.googletagmanager.com/gtag/js?id=ENTERID"
+    );
+    scriptElement.setAttribute("data-scriptid", "ga");
+
+    firstScriptElement.parentNode.insertBefore(
+      scriptElement,
+      firstScriptElement
+    );
+  }
+  // =========================================================================
+  // COOKIE CONSENT: LOAD SCRIPTS AFTER USER INTERACTION
+  // =========================================================================
+  function loadScripts(event) {
+    const acceptedCategories = event?.detail?.acceptedCategories;
+
+    if (acceptedCategories.includes("analytics")) {
+      console.log("Analytics accepted.");
+
+      loadAnalyticsScript();
+    }
+    if (acceptedCategories.includes("marketing")) {
+      console.log("Marketing accepted.");
+    }
+  }
+
+  window.addEventListener("cookie_consent_preferences_restored", loadScripts);
+  window.addEventListener("cookie_consent_preferences_updated", loadScripts);
+</script>
+```
+
 ---
@@ -255,0 +403,0 @@

No alert changes

Improved metrics

Total package byte prevSize

414399

increased by1.57%

Lines of code

5696

increased by0.28%

Number of lines in readme file

407

increased by57.14%

No dependency changes