AdEngine

Installation

npm install github:Wikia/ad-engine#v10.0.0

Usage (ES6)

Load GPT library

Follow DoubleClick for Publishers instructions.

Prepare configuration

Create context.js module with local config:

'use strict';

import Context from 'wikia/ad-engine/src/services/context-service';

Context.extend({
	adUnitId: '/5441/name/_{custom.namespace}/{slotName}',
	events: {
		pushOnScroll: {
			ids: [
				'bottom_leaderboard'
			],
			threshold: 100
		}
	},
	listeners: {
		porvata: [],
		slot: []
	},
	options: {
		maxDelayTimeout: 2000,
		porvata: {
			audio: {
				exposeToSlot: true,
				segment: '-audio',
				key: 'audio'
			}
		},
		video: {
			moatTracking: {
				enabled: false,
				partnerCode: 'foo',
				sampling: 1
			}
		},
		customAdLoader: {
			globalMethodName: 'loadCustomAd'
		}
	},
	slots: {
		top_leaderboard: {
			aboveTheFold: true,
			sizes: [
				{
					viewportSize: [970, 200],
					sizes: [[728, 90], [970, 250]]
				},
				{
					viewportSize: [728, 200],
					sizes: [[728, 90]]
				},
				{
					viewportSize: [0, 0],
					sizes: [[300, 250]]
				}
			],
			defaultSizes: [[728, 90], [970, 250]],
			targeting: {
				loc: 'top'
			}
		},
		incontent_boxad_1: {
			defaultSizes: [[300, 250]],
			repeat: {
				additionalClasses: 'hide',
				index: 1,
				insertBeforeSelector: '.main p',
				limit: null,
				slotNamePattern: 'incontent_boxad_{slotConfig.repeat.index}',
				updateProperties: {
					'targeting.rv': '{slotConfig.repeat.index}'
				}
			},
			sizes: [
				{
					viewportSize: [768, 0],
					sizes: [[300, 250], [300, 600]]
				}
			],
			targeting: {
				loc: 'hivi',
				pos: 'incontent_boxad',
				rv: 1
			}
		},
		bottom_leaderboard: {
			disabled: true,
			sizes: [
				{
					viewportSize: [728, 100],
					sizes: [[728, 90]]
				},
				{
					viewportSize: [320, 200],
					sizes: [[320, 480]]
				}
			],
			defaultSizes: [],
			targeting: {
				loc: 'bottom'
			},
			viewportConflicts: [
				'top_leaderboard'
			]
		}
	}
});

export default Context;

Run AdEngine module

Setup custom page level targeting and initialize AdEngine.

import AdEngine from 'wikia/ad-engine/src/ad-engine';
import Context from './context';

// ...

window.adsQueue = window.adsQueue || [];

// Setup adStack so slots can be pushed to window.* from DOM/other JS scripts
Context.set('state.adStack', window.adsQueue);

// Setup screen size
Context.set('state.isMobile', true);

// Setup custom variables so they can be used in adUnitId configuration
Context.set('custom.namespace', 'article');

// Setup gpt targeting
Context.set('targeting.post_id', 123);

new AdEngine().init();

Request ad slot

Request immediately:

<div id="top_leaderboard">
	<script>
		window.adsQueue.push({
			id: 'top_leaderboard'
		});
	</script>
</div>

or prepare on scroll container (check above context configuration):

<div id="bottom_leaderboard"></div>

Debug mode

Add adengine_debug=1 to see all logged events in console. In order to get logs from specified groups use ?adengine_debug=<group_name_1>,<group_name_2>,....

Example pages

• Browser detect
• AdBlock detect
• Floating ad template
• Slot animations
• Block BTF
• BTF only (skip ATF slots)
• AdEngine start delay
• Ad empty response
• Repeatable slots
• Viewport conflicts
• Porvata video player

Access examples

Build bundle package

npm run build

Build bundle package and start http server by running

npm run serve

Navigate to http://localhost:8081/ (you may have different port)

Run tests

npm run test

Lint all files

npm run lint

Publish new version

⚠️ Make sure you're using latest version of node/npm (preferably [email protected] and [email protected])

1. Use your regular workflow. Push changes to branch, test them and create pull request to dev.
2. Switch to dev branch once you merge all changes and pull new changes from github
3. Bump version (remember to follow Semantic Versioning)

npm version patch

This command runs preversion script which:

• run all tests
• lint all files
• build dist directory with output files for "client's" repositories
• adds built files to commited version

4. Push changes to github

git push --follow-tags