storipress / vue-advertising

Simplify programmatic ad-ops in Vue applications.

Vue Advertising

A JavaScript library for display ads in Vue applications.

Website · GitHub · Slack

Introduction

Integrate ads in your app the “Vue way". A set of helpers for integrating complex advertising setups in Vue projects. It reduces the pain of integrating advertising in server side rendered projects. It also takes care of bloat by centralising configuration.

Why

We believe content is core to any modern society. However, it is getting more and more difficult to monetise content with advertising whilst using modern development tools. Advertising needs a revamp. A renovation. Modernised for the way we create content today.

• One central configuration file for all your Google Publisher Tags and Prebid placements (Prebid is optional)
• One provider component that handles all the “plumbing” with googletag and pbjs, nicely hidden away
• Ad slot components that get filled with creatives from the ad server when they mount to the DOM
• Works well in single page applications with multiple routes
• Suitable for server-side-rendering
• Supports lazy loading, even for Prebid ads, individually configurable per ad slot

Prerequisites

Google Ad Manager

You will need a Google Ad Manager account set up to deliver display ads through Google Publisher Tags (GPT).

Optionally, vue-advertising real-time header bidding with Prebid.

Dependencies

vue-advertising requires @vueuse/head or @unhead/vue to manage and load scripts. Please make sure you are using Karbon or Nuxt, or have set up @vueuse/head or @unhead/vue in your project.

Documentation

You can find more info in react-advertising (the original library which we ported to Vue)

Below is the basic usage of vue-advertising

Set up your ad providers

1. Create your GPT config

const gptConfig = {
  slots: [
    {
      id: 'banner-ad',
      path: '/6355419/Travel/Europe/France/Paris',
      sizes: [[300, 250]],
    },
  ],
  usePrebid: false,
  useAPS: false,
  customEvents: {
    blueBackground: {
      eventMessagePrefix: 'BlueBackground:',
    },
  },
}

2. In places you want to show advertising, wrap the area with AdvertisingProvider and provide the config from the previous step, so information in your config is passed to the ad slot.

<template>
  <AdvertisingProvider :config="gptConfig">
			...
  </AdvertisingProvider>
</template>

3. Use AdvertisingSlot to display ads in the location where you want to show ads, and note that AdvertisingSlot must be used within AdvertisingProvider

   <AdvertisingSlot id="banner-ad" :is-sticky="true" />

4. Your ads will now appear!

Preload ads (optional)

vue-advertising only

Replacing AdvertisingProvider with GlobalAdvertisingProvider and AdvertisingSlot with GlobalAdvertisingSlot can speed up the loading of ads.

Credits

• @KijijiCA - original react-advertising
• @ches4117 - rewrite react-advertising to vue-advertising