Skip to content

Commit

Permalink
Merge pull request #16 from tagconcierge/bugfix/trigger-ready-event-o…
Browse files Browse the repository at this point in the history
…n-window

Bugfix/trigger ready event on window
  • Loading branch information
mfrankiewicz authored May 14, 2024
2 parents 377633a + 3615943 commit ef456cc
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 4 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
node_modules
dist
.DS_Store
/.idea
9 changes: 9 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
18 changes: 16 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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"],
Expand Down
2 changes: 1 addition & 1 deletion src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -407,4 +407,4 @@ window.cookiesBannerJs = function(overrideLoadConsentState, overrideSaveConsentS
ready(consentBannerJsMain.bind(null, config));
}

dispatchBodyEvent('ready');
window.dispatchEvent(new CustomEvent('consent-banner.ready'));

0 comments on commit ef456cc

Please sign in to comment.