Table of contents

AdBlock hunter

About

In version 4.3.7 I'm added new component Adblocker. This component is intended for hunting/fishing for ad blockers.

Setup

The component works automatically. To configure it, you can create a settings object names metroAdblockSetup and put it before Metro UI js file:

                    <script>
                        var metroAdblockSetup = {
                            checkInterval: 5000,
                            fireOnce: 3,
                            onBite: function(){
                                console.warn("Adblock present");
                            }
                        }
                    </script>
                    <script src="metro.js"></script>

Options

  • checkInterval - ms, How often to check the bite
  • checkStop - int, How many times to check a bite before leaving fishing
  • fireOnce - bool || int, How many times to generate an event that the blocker is caught
  • localhost - bool, default false, Firing alert on localhost
  • localhostPattern - string, additional pattern for check localhost
  • onAlert - event, Callback for an event when a blocker is caught
  • onFishingStart - event, Callback
  • onFishingDone - event, Callback

Events

Component Adblock firing event adblockalert, when blocker is caught. You can add eventListener to work with it. 

                    $(window).on("adblockalert", function(){
                        ...
                    });
or 

                    window.addEventListener("adblockalert", function(){
                        ...
                    });

Example

See demo - https://pimenov.com.ua/demo/adblock/adblock.html. Below is a full source code for demo.


                    <!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/current/metro.css" rel="stylesheet">

                        <title>AdBlock Alert - Metro UI :: 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="metro/metro.js></script>
                        <script>
                            $(function(){
                                $(window).on("adblockalert", function(){
                                    Metro.toast.create("AdBlock present", null, null, "alert", {
                                        showTop: true,
                                        distance: 150
                                    });
                                })
                            })
                        </script>
                    </body>
                    </html>