v1.7.0 - Script Loader & iFrame Blocking

✨ New Features

Script Loader

We're deprecating the tracking blocker and replacing it with a new approach to managing script loading based on consent.

The script loader will handle the loading, unloading and life cycle of all scripts based on consent.

To make using the script loader easier, we've added a new @c15t/scripts package that contains prebuilt scripts for common analytics and marketing tools as well as introduced integration guides for integrating c15t with your tools such as Google Tag Manager (GTM) and PostHog.

import { ConsentManagerProvider } from '@c15t/react';
import { googleTagManager } from '@c15t/scripts/google-tag-manager';

export function App({ children }: { children: React.ReactNode }) {
  return (
    <ConsentManagerProvider options={{
      scripts: [
        googleTagManager({
          id: 'GTM-XXXXXXX',
        }),
        {
          id: 'example',
          src: 'https://analytics.example.com/script.js',
          category: 'analytics',
        }
      ]
    }}>
      {children}
    </ConsentManagerProvider>
  );
}

⚠️ Heads-up: the current tracking blocker will be removed in c15t v2.0. It is automatically disabled when using the script loader in v1.7.0.

See the Script Loader documentation for full details.

iFrame Blocking

Stopping iframes such as YouTube embeds from loading until consent is given is important for privacy and compliance. This update introduces two new ways to block iframes:

• Frame Component (React - Recommended): This is a React component that conditionally renders content and provides a pre-built/customizable placeholder providing great UX. Learn more about the Frame component
• Headless: This is a headless implementation that does not render any DOM elements. It only manages the src/data-src attributes of existing iframe elements.

import { Frame } from '@c15t/react';

export function App({ children }: { children: React.ReactNode }) {
  return (
    <Frame category="marketing" className="aspect-video w-full">
      <iframe
        title="Cool Duck Video"
        src="https://www.youtube.com/embed/mQJ6q1ZCzsg"
        width="100%"
        height="100%"
      />
    </Frame>
  );
}

See the iFrame Blocking documentation for full details.

Dynamic Consent Categories

Consent categories are now dynamic and update based on the content of the page. For example, if you set the categories to ['necessary', 'marketing'] but there is an script (via the script loader) with the category ['experience'], the consent banner will show the experience category as well.

This logic is applied to the iframe blocking as well via the data-category attribute and the Frame component in React.

New Examples!

We've moved our examples to a new repository, examples. As well as added more detailed examples instead of barebones examples.

Currently the in-depth examples are only available for the React & Next.js frameworks but we'll be updating the JavaScript examples soon.

🐛 Bug Fixes & Improvements

@c15t/nextjs

• Fixed both headless exports for Next.js

@c15t/react

• Fixed missing CSS variables for font-family & line-height for the cookie banner
• Improved button hover transitions when changing theme
• Fixed missing "use client" causing build errors in Next.js 14

@c15t/backend

• Fixed handling of multiple subdomains e.g. foo.bar.example.com

@c15t/cli

• Corrected spelling of "GitHub" in CLI commands
• Generated React & Next.js code now follows a new pattern for improved DX

@c15t/logger

• Added a new logger package for logging errors and warnings for use in the CLI & backend to replace external logging package.

@c15t/translations

• Added translations for the Frame component