1.2.11 • Published 6 years ago

ng2-ad-dfp v1.2.11

Weekly downloads
6
License
MIT
Repository
github
Last release
6 years ago

Angular 2 Component

DEPRECATED: PLEASE USE ngx-ad-dfp

This component creates and displays ads for DoubleClick for Publishers in your Angular2 project. All you have to do is install it, include it in your app.module.ts, define your settings in a json file, and insert a <ad-dfp [type]="'banner'"></ad-dfp> in any page.html you want.

Check my article on Medium about this component !

Installation

You should first include in your index.html file's headers this script: <script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>

To install this library, run:

$ npm install ng2-ad-dfp --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { AdDFPComponent } from 'ng2-ad-dfp';

@NgModule({
  declarations: [
    AppComponent,

    // Specify your library as a declaration
    AdDFPComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library you have to define some settings

Settings

To set-up your settings you need to create a settings file.

In your project, create a settings.json like: src/assets/settings/settings.json

It should look like this:

{
  "network": 00000000,
  "tags": {
    "banner": 00000000,
    "inter": 00000000
  },
  "ID": {
    "banner": " ",
    "inter": " "
  },
  "mapping": {
    "mobile": {
      "width": 320,
      "height": 50
    },
    "tablet": {
      "width": 728,
      "height": 90
    },
    "desktop": {
      "width": 1024,
      "height": 120
    }
  },
  "adBlockDetector": false
}

ID is the ID of your ad-unit defined in DoubleClick.

If you do not wish to use a mapping just fill all the fields with the same values.

Mapping is done this way :

AdBlock detector

The function detectAdBlocker() needs a script named "ads.js" included in your index.html ads.js should look like this:

var isAdBlockEnabled = false;

And then:

<head>
  <script src="assets/script/ads.js"></script>
</head>

You also need to put true to the "adBlockDetector" value in settings.json

It will then detect when an AdBlocker is used and execute what is in the showDetectedAdBlocker() function You probably want to display a message asking the user to put your web app in his whitelist.

You can define the showDetectedAdBlocker() function by adding this to your ads.js:

var adsFunction = function() {
  /* do whatever you want */
}

Display ad in a web app with a single line of code

<ad-dfp [type]="'banner'"></ad-dfp>

OR

<ad-dfp [type]="'inter'"></ad-dfp>

That's it ! You're displaying DFP ads !

License

This component is under MIT License

ComponentDoubleClickTypeScriptadsangularangular2
@everything-registry/sub-chunk-2277@infinitebrahmanuniverse/nolb-ng2-a@zalastax/nolb-ng2-a
1.2.11

6 years ago

1.2.10

6 years ago

1.2.9

7 years ago

1.2.8

7 years ago

1.2.7

7 years ago

1.2.6

7 years ago

1.2.5

7 years ago

1.2.4

7 years ago

1.2.3

7 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.8

7 years ago

1.1.7

7 years ago

1.1.6

7 years ago

1.1.5

7 years ago

1.1.4

7 years ago

1.1.3

7 years ago

1.1.2

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

1.0.0

7 years ago

0.1.1

7 years ago