Hunting for ad-blockers
Tags: metro4, javascript, css, html
Published: 2020-05-17 18:13:45

Sometimes, when developing a site, a developer is faced with the problem of having an activated ad blocker on a user browser. It’s good if the developer has a ready-made solution that allows you to respond to the presence of a blocker. And if there is no such solution, then you have to either look for it or invent it. Starting with version 4.3.7, [Metro 4](https://metroui.org.ua) provides this solution out of the box.

### How it works
The work of the blocker hunter takes place in 2 stages:
1) Metro 4 creates a bait for the blocker and publishes it in the DOM.
2) In the second stage, Metro 4 catches the blocker on this bait, like a fisherman a fish. If the blocker pecked and deleted/blocked the bait, Metro 4 generates the corresponding event and causes a callback, if it specified in the settings.

### Setup Adblock hunter
To set up Adblock hunter, you must define a special object, named `metroAdblockSetup`. This set up rewrite a default config.

#### Defaults
```js
var AdblockDefaultConfig = {
    adblockDeferred: 0, // How many ms will delay component initialization
    checkInterval: 1000, // How often to check the bait
    fireOnce: true, // bool | int Check once or a specified number of times
    checkStop: 10, // Stop fishing after the specified number of times
    onBite: Metro.noop // Callback
};
```

#### On site setup
You must define set up object before Metro 4 loading.
```html
<script>
    var metroAdblockSetup = {
        checkInterval: 5000,
        fireOnce: 3,
        onBite: function(){
            console.warn("Adblock present");
        }
    }
</script>
<script src="https://cdn.metroui.org.ua/v4/js/metro.js"></script>
```

#### Define event hadler
If the fishing is successful, Metro 4 generates a special event with the name `adblockalert`. You can define an event handler for this event to perform appropriate actions.
```js
$(window).on("adblockalert", function(){
    Metro.toast.create("AdBlock present", null, null, "alert", {
        showTop: true,
        distance: 150
    });
});
```
[Link to the demo](https://pimenov.com.ua/demo/adblock/)

### The full example code:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="https://cdn.metroui.org.ua/v4/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>AdBlock Alert - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">
    <div class="container">
        <h1 class="text-center">AdBlock hunter demo</h1>
        <div class="text-center">
            If ad blocker is enabled, you should see a toast notification about this. This notification will appear three times.
        </div>
    </div>

    <script>
        var metroAdblockSetup = {
            checkInterval: 5000,
            fireOnce: 3,
            onBite: function(){
                console.warn("Adblock present");
            }
        }
    </script>
    <script src="https://cdn.metroui.org.ua/v4/js/metro.js?ver=@@b-version"></script>
    <script>
        $(function(){
            $(window).on("adblockalert", function(){
                Metro.toast.create("AdBlock present", null, null, "alert", {
                    showTop: true,
                    distance: 150
                });
            })
        })
    </script>
</body>
</html>
```