detect-missing-adblocker
v0.0.3
Published
> A web component that will show a warning if a visitor doesn't have an ad blocker.
Downloads
283
Readme
detect-missing-adblocker
A web component that will show a warning if a visitor doesn't have an ad blocker.
Including the component to an HTML file
- Import custom element:
Unpkg
<script type="module" src="https://unpkg.com/detect-missing-adblocker@latest/dist/detect-missing-adblocker.js?module=true"></script>
<link rel="stylesheet" href="https://unpkg.com/detect-missing-adblocker@latest/nativeads.js.css">
Snowpack
<script type="module" src="https://cdn.skypack.dev/detect-missing-adblocker"></script>
<link rel="stylesheet" href="https://cdn.skypack.dev/detect-missing-adblocker/nativeads.js.css">
- Start using it!
<detect-missing-adblock>
<span slot="title">🦠 Ad-blocker not detected</span>
<span slot="message">This site doesn't contain ads but consider installing a browser extension that blocks ads and other malicious scripts in your browser to protect your privacy and security.
<p><a href="https://stefanbohacek.com/project/detect-missing-adblocker-wordpress-plugin/#resources" target="_blank">Learn more.</a></p>
</span>
</detect-missing-adblock>
Including the component from NPM
- Install
detect-missing-adblock
NPM package:
npm i detect-missing-adblock
- Import custom element:
import DetectMissingAdBlocker from 'detect-missing-adblocker/dist/detect-missing-adblocker.js'
- Include that
script
tag in your HTML. - Start using it:
<detect-missing-adblocker>
<span slot="title">🦠 Ad-blocker not detected</span>
<span slot="message">This site doesn't contain ads but consider installing a browser extension that blocks ads and other malicious scripts in your browser to protect your privacy and security.
<p><a href="https://stefanbohacek.com/project/detect-missing-adblocker-wordpress-plugin/#resources" target="_blank">Learn more.</a></p>
</span>
</detect-missing-adblocker>