Google Ad Manager

David · 21 April 2020 10:23

Description

The Google Ad Manager package will allow Frontity to integrate with Google Ad Manager, letting you add fills for ads in frontity.settings.js in order to make them appear in a specific slot (see Slot and Fill).

Note about naming:

Google Publisher Tag is the name that ad tags (i.e. the HTML code) receive. DoubleClick for Publishers was the name of the service until July 2018, when it was renamed to Google Ad Manager.

This package wouldn’t have general settings.
Specific ad settings would be defined in each fill.
Also, you would be able to get the GooglePublisherTag component from libraries and render it in any place.

UserStories

As a Frontity user
I want to install and configure the Google Ad Manager package
so that I can show ads from Google Ad Manager in a site, without coding.

As a Frontity user
I want to create fills (see Slot and Fill) with ad components
so that I can show ads in specific slots of a Frontity theme.

As a Frontity user
I want to use the GooglePublisherTag component directly
so that I can show ads from Google Ad Manager in my own theme without using fills.

The next two user stores are going to be developed in a different FD:

As a Frontity user > I want to show ads in SSR > so that a visitor would see ads without having to wait ot React to do the CSR.

As a Frontity user > I want to lazyload ads > so that I can show ads without harming visitors experience.

Possible solution

Initial proposed solution (click to open)

Any ad package should expose the Ad component in libraries, under its specific namespace (in this case googleAdManager), or following the rules decided on Slot and Fill.

Apart from that, the implementation of each package would be limited to the specific Ad component and the integration with the ad provider.

Ads should work on SSR, so the way to render them should be using the Script component or something like that. The same for setup tags.

Examples

Add an ad above the first post of any archive.
Add ads in the middle of a post’s content, below the header, above the footer, etc.

References:

Google Publisher Tag - Getting started: https://developers.google.com/doubleclick-gpt/guides/get-started
Google Publisher Tag - Reference: https://developers.google.com/doubleclick-gpt/reference
Component implementation for the old framework: https://github.com/wp-pwa/wp-pwa/blob/dev-stable/core/packages/ads/shared/components/Ad/DoubleClick/index.js
Script implementation for the old framework: https://github.com/wp-pwa/wp-pwa/blob/dev-stable/core/packages/ads/shared/components/Ad/DoubleClick/functions/call.js
This was the announcement renaming DoubleClick For Publishers to Google Ad Manager: Introducing Google Ad Manager (July 2018)

Possible Implementation

David · 21 April 2020 12:49

Possible implementation

In this proposal wasn’t included how to implement the lazy-load feature.

Installation

The package would be named @frontity/google-ad-manager. This would be the way to install it:

npm i @frontity/google-ad-manager

This how to configure it in frontity.settings.js:

module.exports = {
  packages: [
    "@frontity/mars-theme",
    "@frontity/tiny-router",
    "@frontity/wp-source",
    {
      name: "@frontity/google-ad-manager",
      state: {
        fills: {
          googleAdManager: {
            belowHeaderAd: {
              slot: "Below Header",
              library: "googleAdManager.GooglePublisherTag",
              priority: 5,
              props: {
                id: "div-gpt-below-header",
                unit: "/6499/example/banner",
                size: [320, 100],
              },
            },
            belowContentAd: {
              slot: "Below Content",
              library: "googleAdManager.GooglePublisherTag",
              priority: 5,
              props: {
                id: "Below Content",
                unit: "/6499/example/banner",
                size: [300, 600],
                targeting: {
                  interests: ["sports", "music", "movies"],
                },
              },
            },
          },
        },
      },
    },
  ],
};

Roots

`roots.googleAdManager`

The component that loads and sets up the Google Ad Manager library. It would just add a script in the <head> element.

import { Head } from "frontity";

const GoogleAdManager = () => {
  return (
    <Head>
      <script
        src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
        async
      />
    </Head>
  );
};

export default GoogleAdManager;

Libraries

`libraries.fills.googleAdManager.GooglePublisherTag`

Component that renders an ad. It would receive the following properties, defined for each ad in state.fills:

unit (string): path of the ad unit (e.g. /6355419/Travel/Europe/France/Paris).
size (number[], number[][]): array of two numbers (width and height). It can be a list of [with, height] pairs to set different sizes.
id (string): identifies the <div> element in which the ad will be rendered.
targeting (object, optional): targeting parameters for this ad, from a key:value map in a JSON object.

This could be the implementation:

import React from "react";

const GooglePublisherTag = ({ unit, size, id, targeting = {} }) => {
  React.useEffect(() => {
    window.googletag.cmd.push(function () {
      window.googletag
        .defineSlot(unit, size, id)
        .addService(window.googletag.pubads())
        .updateTargetingFromMap(targeting);

      window.googletag.display(id);
    });
  }, []);

  return <div id={id} />;
};

export default GooglePublisherTag;

NOTE: we had some problems in the past with ads that were not shown sometimes. I the case that problem appears again, here is the implementation we did to solve it: https://github.com/wp-pwa/wp-pwa/blob/dev-stable/core/packages/ads/shared/components/Ad/DoubleClick/functions/call.js#L13-L19

Issue

Root & GooglePublisherTag components

luisherranz · 22 April 2020 06:59

I would move this user story to another feature as well.

Apart from that, in the implementation, don’t you need to check first for the existence of the googletag.com object/array? Something like this:

window.googletag.cmd = window.googletag ? window.googletag.cmd : { cmd: [] };

David · 5 June 2020 09:18

I’ve updated the implementation proposal to use React.useEffect instead of our <Script> component.

luisherranz · 27 July 2020 09:57

I have updated the proposal to add the googleAdManager namespace to the fill (libraries.fills.googleAdManager.GooglePublisherTag).

By the way, why are you using GooglePublisherTag for the fill’s name instead of something simpler like Ad? Is it because it could be reused somehow by other ad libraries?

mmczaplinski · 12 August 2020 21:55

@David Could you let Luis know? It’s not clear for me either I’m guessing that Ad is too generic and we will have more (other) ad packages in the future.

mmczaplinski · 12 August 2020 22:00

This has been merged in https://github.com/frontity/frontity/pull/522

The implementation follows Google Ad Manager so the user can now configure the Ads like:

// This is just copy-pasted from the proposal with no changes in 
// case the original message gets updated

{
      name: "@frontity/google-ad-manager",
      state: {
        fills: {
          googleAdManager: {
            belowHeaderAd: {
              slot: "Below Header",
              library: "googleAdManager.GooglePublisherTag",
              priority: 5,
              props: {
                id: "div-gpt-below-header",
                unit: "/6499/example/banner",
                size: [320, 100],
              },
            },
            belowContentAd: {
              slot: "Below Content",
              library: "googleAdManager.GooglePublisherTag",
              priority: 5,
              props: {
                id: "Below Content",
                unit: "/6499/example/banner",
                size: [300, 600],
                targeting: {
                  interests: ["sports", "music", "movies"],
                },
              },
            },
          },
        },
      },
    },

SantosGuillamot · 13 August 2020 13:41

The beta version has been released : Read the full Release Announcement.

Here we have a quick demo of it, how to configure and how it works:

Pablo · 16 August 2020 22:10

A post was split to a new topic: Google Ad Manager: How to use responsive ads and open ads in a new tab

juanma · 19 November 2020 17:03

A post was split to a new topic: How to insert the slot in the head when using Google Ad Manager package