Dynamic Ads

This library helps to create ads placeholder and render ads dynamically in the DOM.

Prerequisites

This project requires NodeJS (version 8 or later) and NPM.

Installation

To install and set up the library, run:

$ npm install --save @astro-eco/dynamic-ads

Or if you prefer using Yarn:

$ yarn add @astro-eco/dynamic-ads

Usage

import '@astro-eco/dynamic-ads';

Accessing global variables and functions

You can also access the library global variables like this

import dynamicads from '@astro-eco/dynamic-ads';

dynamicads._setTargetting([...globalAdTargets, ...addTargets]);

Set configuration endpoint as global variable in window object

window.__ADS_CONFIG_ENDPOINT__ = 'CONFIG_ENDPOINT'

Optional Features

Some examples of ways to enable lazy loading below. Normally, only one of these methods should be used.

import dynamicads from '@astro-eco/dynamic-ads';

// A) Enable with defaults.
dynamicads._enableLazyLoading();

// B) Enable lazy loading with...
dynamicads._enableLazyLoading({
      // Fetch slots within 5 viewports.
      fetchMarginPercent: 500,
      // Render slots within 2 viewports.
      renderMarginPercent: 200,
      // Double the above values on mobile.
      mobileScaling: 2.0,
    });

Ads Configuration

Configure ads like this

{
  "routes": [
    {
      "link": "^/", // regular expression
      "selector": "#app-content > div > :nth-child(1)", // DOM selector
      "insertAfter": true,
      "insertBefore": false
    }
  ],
  "adUnitId": "AD_UNIT_ID",
  "divId": "DIVID",
  "width": 970,
  "height": 250,
  "isSticky": false,
  "enabled": true,
  "showOnMobile": true,
  "showOnDesktop": false,
  "sizeMapping": {
    "0": "300, 300",
    "300": "300, 250",
    "960": "970, 250"
  },
  "type": "TYPE_OF_AD",
  "containerStyles": {
    "mobile": {
      "background-color": "#f8f8f9",
      "height": "300px",
      "width": "100vw",
      "display": "flex;",
      "align-items": "center;",
      "justify-content": "center;"
    },
    "tablet": {
      "background-color": "#f8f8f9",
      "height": "300px",
      "width": "100vw",
      "display": "flex;",
      "align-items": "center;",
      "justify-content": "center;"
    },
    "desktop": {
      "background-color": "#f8f8f9",
      "height": "300px",
      "width": "100vw",
      "display": "flex;",
      "align-items": "center;",
      "justify-content": "center;"
    }
  }
}