npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cubesoft/ngx-cookiebot

v2.0.1

Published

A simple Angular wrapper for the Cookiebot SDK

Downloads

1

Readme

NgxCookiebot

An Angular wrapper around the Cookiebot SDK.

Installation

npm i @halloverden/ngx-cookiebot -S

Setup

Prerequisites

A Cookiebot account.

1. Configure service

Configure the service according to the Cookiebot developer docs. The package also ships with custom config not defined in the Cookiebot developer docs. See below for deets.

// cookiebot.config.ts
import { NgxCookiebotConfig } from '@halloverden/ngx-cookiebot';

export class CookiebotConfig extends NgxCookiebotConfig {
  blockingMode: 'auto' | 'manual' | string;
  cbId: string;
  cdn: 'com' | 'eu' | string;
  culture?: string;
  framework?: string;
  level?: string;
  loadScript: boolean;
  type?: string;
}

Custom config

In addition to the config defined in the Cookiebot developer docs, the package also supports this custom config:

cdn

Choose what version of the cookiebot CDN you want to use (https://support.cookiebot.com/hc/en-us/articles/4530208762396-Cookiebot-CMP-European-CDN-solution):

| Config | CDN | |--------|:---------------------:| | com | consent.cookiebot.com | | eu | consent.cookiebot.eu |

loadScript

The package injects the script in the head tag through Angular. This can lead to high script loading time. If your app is time sensitive, you can opt out of the package setting the script tag, and set it yourself. You can use the module for everything else but the script embedding.

NB! If you set this config to false, no other config parameter will have effect, and you need to config them yourself.

2. Import package

// app.module.ts
import { NgxCookiebotModule } from '@halloverden/ngx-cookiebot';
import { CookiebotConfig } from '@config/cookiebot.config';

@NgModule({
  imports: [
    NgxCookiebotModule.forRoot(CookiebotConfig)
  ]
})

Usage

Consent box

The script will now automatically append itself to the head tag, which in turn will prompt the cookie consent box.

To interact with the "cookiebot" object, NgxCookiebot comes with a service that exposes it, which is ready for use after the service is ready (the script is injected):

// whatever.ts
...
constructor(private _cookieBotService: NgxCookiebotService) {}
...
this._cookieBotService.onServiceReady$.pipe(
  filter((ready: boolean) => {
    return ready;
  })
).subscribe(() => {
  // this._cookieBotService.cookiebot is available
});
...

Reference the Cookiebot docs for a list of properties, methods and callbacks available through the cookiebot object.

If you prefer to use observables, the NgxCookiebotService exposes an observable for every available method and callback on the cookiebot object:

Methods

| Method | Observable | |-----------------------------------|:-------------------------:| | CookiebotOnConsentReady | onConsentReady$ | | CookiebotOnLoad | onLoad$ | | CookiebotOnAccept | onAccept$ | | CookiebotOnDecline | onDecline$ | | CookiebotOnDialogInit | onDialogInit$ | | CookiebotOnDialogDisplay | onDialogDisplay$ |
| CookiebotOnTagsExecuted | onTagsExecuted$ |

Callbacks

| Callback | Observable | |-----------------------------------|:-------------------------:| | CookiebotCallback_OnLoad | onLoadCallback$ | | CookiebotCallback_OnAccept | onAcceptCallback$ | | CookiebotCallback_OnDecline | onDeclineCallback$ | | CookiebotCallback_OnDialogInit | onDialogInitCallback$ | | CookiebotCallback_OnDialogDisplay | onDialogDisplayCallback$ | | CookiebotCallback_OnTagsExecuted | onTagsExecutedCallback$ |

Usage example:

// whatever.ts
...
this._cookieBotService.onConsentReady$.subscribe(
  // Consent ready
  console.log(this._cookieBotService.cookiebot.consent)
)
...

Cookie declaration

The NgxCookiebot package exposes a component to insert the cookie consent declaration. Use the component where you want the declaration to appear:

// my.component.html

<ngx-cookiebot-declaration></ngx-cookiebot-declaration>

License

MIT © Hallo Verden