0.0.2 • Published 5 years ago

vue-google-ad-manager v0.0.2

Weekly downloads
50
License
MIT
Repository
github
Last release
5 years ago

Google Ad Manager for Vue

Vue.js plugin to easy implement google ad units to your SPA

Currently in production on these sites

https://northplattepost.com

Installation

Install

npm install vue-google-ad-manager

or

yarn add vue-google-ad-manager

Import and use the plugin in your main.js or entry file You must pass in your network code and mappings. Sizes object is optional. Example below.

import AdManager from 'vue-google-ad-manager';

let mappings = {
	banner:[
		{ window :[0,0], sizes: [ [320,50] ] },
		{ window :[980,0], sizes: [ [720,60],[728,90] ] }
	],
	rectangle:[
		{ window: [0, 0], sizes: [ [300, 250] ] },
        { window: [980, 0], sizes: [ [300, 250] ] }
	]
}

let sizes = {
	banner: [ [720, 60],[728, 90],[320, 50] ],
	rectangle: [ [300, 250] ]
};

Vue.use(AdManager, {
    id: 'ad-manager-network-code',
	mappings,
	sizes //optional
});

Params

TitleDescriptionTypeRequired
mappingsMapping sizes objectobjecttrue
sizesGoogle ad unit sizesobjectfalse

Use

Now you can use the google ad component throughout your application. There are a few params you can pass through for customization

<google-ad unit="AdUnitName"></google-ad>

Params

TitleDescriptionTypeRequired
unitAd unit name from ad managerstringtrue
idDiv id tag - used to identify adsstringfalse

Contributing

Pull requests welcomed!