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 !
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 --saveand 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
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 :
- Mobile is >= [320,400]
- Tablet is >= [728, 400]
- Desktop is >= [1024, 400]
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 */
}<ad-dfp [type]="'banner'"></ad-dfp>OR
<ad-dfp [type]="'inter'"></ad-dfp>That's it ! You're displaying DFP ads !
This component is under MIT License