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
};
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>
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
});
});
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>
Top comments (0)