Can anyone share experience of implementing DFP/GAM (Google Ad Manager)?

[luba-media]

I'd like to monetize by blog (gatsby with md/mdx) with Google Ad Manager (aka DFP).
As mention in this blog post the process consists of three parts

1. load gpt (Google Publisher Tag) script
2. define ad slot
3. render ad element and display ad

What is the best way to implement this in react?
I was surprised to see that there aren't any discussions about GAM/DFP in the community.

Thanks in advance!

[fbuireu]

It's not a Gatsby-related approach, since everything that works in React, will work in Gatsby.

The idea is to make a promise-based approach to get the data from the GAM/DFP in order to display the ad somewhere in the code. You can achieve it manually or using third-party dependencies such as react-gpt.

Given a markup snippet like (provided by Google Ad Manager):

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
      window.googletag = window.googletag || {cmd: []};
      googletag.cmd.push(function() {
        googletag.defineSlot('/22274312948/lm1_lb1', [728, 90], 'div-gpt-ad-1614985862735-0').addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
      });
</script>

It can be transpiled with something like:

import React from 'react'
import { Bling as GPT } from 'react-gpt'
import { Helmet } from 'react-helmet'


const DFPWrapper = props => {
  return <>
    <Helmet>
      <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js' />
      <script>
        {`window.googletag = window.googletag || { cmd: [] };
          googletag.cmd.push(function() {
          googletag.defineSlot('/22274312948/lm1_lb1', [728, 90], 'div-gpt-ad-1614985862735-0').addService(googletag.pubads());
          googletag.pubads().enableSingleRequest();
          googletag.enableServices();`}
      </script>
    </Helmet>
    <GPT adUnitPath='/22274312948/lm1_lb1' slotSize={[728, 90]} />
  </>
}

Notice that the adUnitPath and the slotSize are props inferred in:

      googletag.defineSlot('/22274312948/lm1_lb1', [728, 90], 'div-gpt-ad-1614985862735-0').addService(googletag.pubads());

Disclaimer⚠️

The react-gpt package seems discontinued and has some deprecation warnings, especially related to syncCorrelator and updateCorrelator (nfl/react-gpt#17). If you are facing these warnings, which until now, won't be code-breaking, you can take a look at @mcontigo's fork: https://github.com/mcontigo/react-gpt