Ad Sentinelle SDK Integration

This guide details all SDK integration methods according to your technical stack.

SDK Architecture

The Ad Sentinelle SDK is designed to be lightweight and performant:

• Size: < 15 KB (gzipped)
• Dependencies: None (Vanilla JavaScript)
• Loading: Asynchronous, non-blocking
• Compatibility: All modern browsers

Recommended Method: Dynamic Loader

The recommended method uses our dynamic loader which automatically loads the configuration from your dashboard:

<script src="https://adwall-backend-xxxxx.run.app/v1/loader/SITE_ID.js" async></script>

Advantages

• ✅ Centralized configuration (changeable without redeployment)
• ✅ Automatic SDK updates
• ✅ Optimized for performance
• ✅ Smart caching

Guides by Framework

Choose your framework for detailed guidance:

Framework	Guide
HTML / Vanilla JS	HTML Integration →
React / Next.js	React Integration →
Vue.js / Nuxt	Vue Integration →

Configuration Options

The SDK can be configured with advanced options:

<script>
  // Global configuration (optional)
  window.ADWALL_CONFIG = {
    debug: false,           // Enable debug logs
    delay: 0,               // Delay before display (ms)
    cookieDomain: null,     // Cookie domain
  };
</script>
<script src="https://adwall-backend-xxxxx.run.app/v1/loader/SITE_ID.js" async></script>

Available Options

Option	Type	Default	Description
debug	boolean	false	Enable console logs
delay	number	0	Delay before detection (milliseconds)
cookieDomain	string	null	Domain for cookies (subdomains)
onDetected	function	null	Callback when ad blocker is detected
onConverted	function	null	Callback after conversion

JavaScript Events

The SDK emits events you can listen to:

// Listen for ad blocker detection
window.addEventListener('adwall:detected', (event) => {
  console.log('Ad blocker detected!', event.detail);
});

// Listen for wall display
window.addEventListener('adwall:displayed', (event) => {
  console.log('Wall displayed', event.detail);
});

// Listen for conversion
window.addEventListener('adwall:converted', (event) => {
  console.log('User converted!', event.detail);
});

Event List

Event	Trigger
adwall:init	SDK initialized
adwall:detected	Ad blocker detected
adwall:displayed	Wall displayed
adwall:closed	Wall closed (soft mode)
adwall:converted	Conversion validated
adwall:error	Error occurred

Single Page Applications (SPA)

For SPAs (React, Vue, Angular), the SDK automatically handles route changes. No additional configuration is needed.

If you want to manually re-check:

// Re-check ad blocker after navigation
window.AdSentinelle?.check();

Content Security Policy (CSP)

If your site uses strict CSP, add these directives:

script-src 'self' https://adwall-backend-xxxxx.run.app;
connect-src 'self' https://adwall-backend-xxxxx.run.app;
style-src 'self' 'unsafe-inline';

Testing in Local Environment

To test locally (localhost), add localhost to the authorized domains list in your dashboard.

Note

Don't forget to remove localhost before going to production.

Integration Verification

See our verification guide to ensure your integration is correct.