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

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

Or if you prefer using Yarn:

```sh
$ yarn add @astro-eco/dynamic-ads
```

## Usage

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

**Accessing global variables and functions**

You can also access the library global variables like this

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

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

Set configuration endpoint as global variable in window object

```js
window.__ADS_CONFIG_ENDPOINT__ = 'CONFIG_ENDPOINT'
```

## Ads Configuration

Configure ads like this

```js
{
  "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;"
    }
  }
}
```

Configure global settings like this

```js

"lazyLoading": true,

// or 

"lazyLoading": {
  "fetchMarginPercent": 500,
  "renderMarginPercent": 200,
  "mobileScaling": 2
},
```