Integrating DataUnlocker Defender

DataUnlocker Defender is a powerful frontend protection layer that shields your website’s tracking and marketing tools from ad blockers and privacy extensions. It works by removing detectable patterns in your web app's code and network activity, ensuring your analytics stack remains operational — even in hostile environments.

To learn more about what Defender does under the hood, see Defender Setup.

Integration methods

There are two primary ways to integrate Defender:

1. Native integration via NPM packages
2. Universal integration via JavaScript file patching

1. Framework integration

Framework integration is the recommended method for most modern web applications. It involves installing Defender as a dependency and wrapping your application logic using framework-specific packages.

Framework-specific packages

We offer pre-built packages for popular frontend frameworks:

• @dataunlocker/defender-react
• @dataunlocker/defender-angular
• @dataunlocker/defender-svelte

For example, in a React app, you would wrap your app with the <Defender> component:

React Integration

Base package for custom integration

Advanced users can use the lower-level base package: @dataunlocker/defender. All framework-specific packages are built on top of it.

2. Universal integration

If your site is built with a CMS, static site builder, or no-code platform, you can use the universal integration method.

Upload your compiled JavaScript file to DataUnlocker, and we’ll return a patched version with Defender seamlessly embedded.

Upload integration form

This method is useful for:

• Patching mission-critical libraries and themes like jQuery, Tailwind CSS.
• Integrating into hosted landing page platforms or older codebases.
• Integrating Defender into websites which framework is not yet suppported by DataUnlocker.

Before you integrate

Before integrating Defender (with either method), you must:

1. Add your domain to your DataUnlocker dashboard
2. Set up the transport endpoint (used to proxy tracking requests)

See Transport Setup for full instructions.

Defender load behavior

Once integrated, Defender loads asynchronously to avoid blocking your site’s content:

• Initialization begins shortly after the page starts loading (typically < 100ms if your transport endpoint is on Cloudflare)
• Protection is fully enabled only after Defender is initialized
• Defender usually initializes before the page is fully loaded, but it’s essential your web app doesn’t initialize trackers too early.

With Defender in place, your tracking and marketing tools are deeply integrated and resilient, making them indistinguishable for privacy tools from the rest of your application.