Use-ad-block-detection NPM

React Hook/Component - use-ad-block-detection

Motivation

In many cases, there is a use case that calls for finding out whether a user has an Ad Blocker turned on. A common example is that many times the functionality of video players is degraded or altogether rendered unusable when an Ad Blocker is present.

The useAdBlockDetection package is used to determine whether or not a user is using an Ad Blocker, and add some utilities surrounding this.

Install

To install via NPM.

npm install use-ad-block-detection

Usage

Wrapper Component

For simple usage, i.e. you just want to show some JSX based on there being an Ad Blocker detected, you can (and probably should) just use the Component import, AdBlockWrapper.

Example Usage:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {AdBlockWrapper} from "use-ad-block-detection";

const App = () => {
  return (
    <div>
      <AdBlockWrapper>
        <div>If you are seeing me, there is an Ad Blocker.</div>
      </AdBlockWrapper>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Hook

If you need more control and want to hook into some helpful utils, then the hook-based implementation may be a better bet.

This hook, useAdBlockDetection, accepts a completely optional config and returns some helpful properties in array format.

Options Config

Option	Type	Default	Description
`storageType`	string (one of "cookies", "local", "session")	'cookies'	In many cases you may want to know if a user has already been presented some sort of alert/modal/toast regarding their Ad Blocker. By keeping track of this 'already seen' boolean, we can limit the user's exposure to any sort of alert. By default we store this boolean value as a cookie, but this can be overridden to use localStorage or sessionStorage. NOTE: This will not be stored automatically, more on that in the hooks's return values below.
`adUrl`	string	Generic Ad Script	Currently, we send a dummy request out to a known generic ad script (Google) to capture the rejection. As ad blockers get smarter, and scripts change, there is a chance this may either be deprecated or somehow be 'caught' by the ad blockers. This allows for an override by sending in your own outside ad script to send a request to and attempt to trigger, and capture the ad blocker's existence.
`hasBlockerCb`	function	null	Callback function that will be called when an ad blocker is detected. NOTE: This will fire every time an Ad Blocker is detected on page load, with no regard for the `storageStatus` boolean. In the event that, for example, you are attempting to capture analytics as to how many times new users have Ad Blocker's enabled this can be used in tandem with `storageStatus`.

Result

After being called, the useAdBlockDetection hook will return an object with the following properties.

Property	Type	Description
`bashowComponent`	boolean OR undefined	Boolean value that will only hold a truthy value when: `isAdBlocker` is true and we have no `storageType` value. i.e. The user has an Ad Blocker and we have not called `storageSetter`.
`storageSetter`	function	Function that when called, will set `new Date().getTime()` value to the selected `storageType`. The date string is both truthy so that showComponent will turn false when this is called, and allows for more advanced checks if you want to show something based on how long ago a user had this value stored.
`isAdBlocker`	boolean OR undefined	A boolean that indicates whether there is an Ad Blocker detected. Initially undefined until finished checking for Ad Blocker.
`storageStatus`	string OR null	If `storageSetter` has been called, this will be a stringified `new Date().getTime()`, otherwise null.

Example Usage:

import * as React from 'react';
import {useAdBlockDetection} from 'use-ad-block-detection';
import useOutsideClick from 'useOutsideClick'; /* mock outside click hook */
import css from './style.css';

// by passing this function into our config object as hasBlockerCb, we call this each time that the useAdBlockDetection hook sees an Ad Blocker and fire off our analytics capturing in the process
const analyticsTrack = () => {
    // do some analytics things in here
}

const Modal = () => {
  const modalRef = React.useRef(null);
  // by passing session as storageType, we're theoretically choosing to show this modal every time the user closes this browser tab and re-opens the url in that browser - using 'local' or the default 'cookies' would have a longer term effect on when to show.
  const { showComponent, storageSetter } = useAdBlockDetection({storageType: 'session', hasBlockerCb: analyticsTrack});
  const [isOpen, setIsOpen] = React.useState(true);
  
  // if we close the modal either by the button or via clicking outside, track that we have shown our user that the site may not run as smoothly with an Ad Blocker so we do not show them it again.
  const handleClose = () => {
    storageSetter();
    setIsOpen(false);
  };
  // handle clicks outside of the modal the same way we handle the Close Modal button
  useOutsideClick(modalRef, () => {
    handleClose();
  });

  return showComponent && isOpen && (
    <div className="modal">
      <div ref={modalRef} className="modalMain">
        <h1>Ad Blocker detected, our videos may not work as smoothly with this enabled.</h1>
        <button type="button" onClick={handleClose}>
          CLOSE MODAL
        </button>
      </div>
    </div>
  );
};

ReactDOM.render(<Modal />, document.getElementById('root'));

@types/js-cookie js-cookie

@everything-registry/sub-chunk-3024 @infinitebrahmanuniverse/nolb-use-a

1.0.1

3 years ago

1.0.0

3 years ago