DEV Community

Serhii Pimenov
Serhii Pimenov

Posted on • Updated on

Hunting for ad-blockers

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 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

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
};
Enter fullscreen mode Exit fullscreen mode

On site setup

You must define set up object before Metro 4 loading.

<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>
Enter fullscreen mode Exit fullscreen mode

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.

$(window).on("adblockalert", function(){
    Metro.toast.create("AdBlock present", null, null, "alert", {
        showTop: true,
        distance: 150
    });
});
Enter fullscreen mode Exit fullscreen mode

Link to the demo

The full example code:

<!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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)