Merge pull request #16 from tagconcierge/bugfix/trigger-ready-event-o…

…n-window Bugfix/trigger ready event on window
tagconcierge · May 14, 2024 · ef456cc · ef456cc
2 parents 377633a + 3615943
commit ef456cc
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 dist
 .DS_Store
+/.idea
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.2.1
+
+- changed the element on which the 'consent-banner.ready' event is called from document.body to window
+
+## 1.2.0
+
+- added 'consent-banner.ready' event triggered immediate after library loading
+- reduced library file size for improved performance
+
 ## 1.1.1
 
 - introduced bundled version with CSS included

diff --git a/README.md b/README.md
@@ -15,13 +15,13 @@
 
 First, include simple CSS for the banner in the `<head>` of the page:
 ```html
-<link rel="stylesheet" href="https://public-assets.tagconcierge.com/consent-banner/1.1.0/styles/light.css" />
+<link rel="stylesheet" href="https://public-assets.tagconcierge.com/consent-banner/1.2.1/styles/light.css" />
 ```
 
 Then in the footer you can include the actual JS:
 
 ```html
-<script src="https://public-assets.tagconcierge.com/consent-banner/1.1.0/cb.min.js" integrity="sha384-Y1z6IGbLaiHSXP+5xO3W/G9a2z1eEeTDqfF6VDI+ha3lNrMw1+n3VUwC/pQOTb7+" crossorigin="anonymous"></script>
+<script src="https://public-assets.tagconcierge.com/consent-banner/1.2.1/cb.min.js" integrity="sha384-s3Z3P3jRWfGRi77peX7uOoW8f5AbSZ862qubQFqICB7mJ/mGtr1iGt/w986DleFP" crossorigin="anonymous"></script>
 <script>
  cookiesBannerJs(
  loadConsentState,
@@ -31,6 +31,20 @@ Then in the footer you can include the actual JS:
 </script>
 ```
 
+Or if you want to load the library script asynchronously, you can use the following `consent-banner.ready` event listener, which will execute the function only when the library is loaded:
+```html
+<script defer src="https://public-assets.tagconcierge.com/consent-banner/1.2.1/cb.min.js" integrity="sha384-s3Z3P3jRWfGRi77peX7uOoW8f5AbSZ862qubQFqICB7mJ/mGtr1iGt/w986DleFP" crossorigin="anonymous"></script>
+<script>
+ window.addEventListener('consent-banner.ready', () => {
+ cookiesBannerJs(
+ loadConsentState,
+ saveConsentState,
+ config
+ );
+ });
+</script>
+```
+
 **INFO:** You can call the `cookiesBannerJs` function whenever, wherever you want, inside it is wrapped with DOM Ready thingy.
 
 To make that work you need to prepare **three** things:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@tagconcierge/consent-banner",
- "version": "1.2.0",
+ "version": "1.2.1",
  "description": "A zero-dependency, lightweight (~3kB), consent platform agnostic, cookie banner for any website.",
  "main": "src/app.js",
  "keywords": ["consent banner", "consent mode", "gtm consent", "cookie banner"],

diff --git a/src/app.js b/src/app.js
@@ -407,4 +407,4 @@ window.cookiesBannerJs = function(overrideLoadConsentState, overrideSaveConsentS
  ready(consentBannerJsMain.bind(null, config));
 }
 
-dispatchBodyEvent('ready');
+window.dispatchEvent(new CustomEvent('consent-banner.ready'));