WanLinLin/google-ad-manager-ad-unit.jsx

## google-ad-manager-ad-unit.jsx
import React from 'react'
import PropTypes from 'prop-types'

const GOOGLE_AD_MANAGER_ID = 'YOUR_ID'

/**
 * It's used to generate ad element id. Make sure:
 *  - only increment it ONCE per component
 *  - only modify it on browser, not on server side
 */
let adElementCount = 0


/**
 * Wrap Google Publisher Tag APIs as a React component
 *
 * Google Publisher Tag provide APIs to render Google Ad Manager's ads on page.
 * https://developers.google.com/doubleclick-gpt/reference
 * https://support.google.com/admanager/answer/1638622?ref_topic=4390040
 *
 * Ad manager ad unit doc: /docs/web/google-ad-manager/README.md
 */
class GoogleAdManagerAdUnit extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      /**
       * Ad element id
       *
       * Google Publisher Tag use this id to render ad to corresponding element. When using
       * Ad Manager to generate ad tag for an ad unit, the id would look like
       * "div-gpt-ad-1551835293521-0". We can use this static id as ad element's id.
       * However, if there are multiple ad elements rendering the same ad unit in one page,
       * we must provide multiple unique id for each ad element.
       *
       * Therefore, istead of using the id provided by Ad Manager. This component use a
       * global variable to generate ids. In the whole lifecyle of a single page application
       * we can generate up to 9007199254740991 unique ids(the maximum of Javascript's
       * number), and it should be sufficient.
       */
      id: null,
    }
  }

  componentDidMount() {
    this.setState({id: `gpt-ad-${ adElementCount++ }`}) // eslint-disable-line no-underscore-dangle
  }

  componentDidUpdate(_prevProps, prevState) {
    if (prevState.id === null && this.state.id) {
      googletag.cmd.push(() => {
        this.slot = googletag.defineSlot(
          `/${ GOOGLE_AD_MANAGER_ID }/${ this.props.adUnitId }`,
          [this.props.width, this.props.height],
          this.state.id,
        )
        this.slot.addService(googletag.pubads())

        if (this.props.shouldCollapseWhenEmpty) {
          this.slot.setCollapseEmptyDiv(true)
        }

        googletag.enableServices()
        googletag.display(this.slot)
      })
    }
  }

  componentWillUnmount() {
    googletag.cmd.push(() => {
      googletag.destroySlots([this.slot])
    })
  }

  render() {
    return (
      <div id={this.state.id}
        className={this.props.className}
        style={{
          height: `${ this.props.height }px`,
          width: `${ this.props.width }px`,
        }}
      />
    )
  }
}

GoogleAdManagerAdUnit.propTypes = {
  height: PropTypes.number.isRequired,
  width: PropTypes.number.isRequired,
  className: PropTypes.string,
  adUnitId: PropTypes.string.isRequired,

  /** The ad might be empty. Sometimes collapse the ad element is better for layout */
  shouldCollapseWhenEmpty: PropTypes.bool,
}

GoogleAdManagerAdUnit.defaultProps = {
  shouldCollapseWhenEmpty: false,
}

export default GoogleAdManagerAdUnit

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Ad Manager Ad Unit Example</title>
</head>
<body>
  <script src="https://www.googletagservices.com/tag/js/gpt.js" async></script>
  <script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
  </script>
</body>
</html>
	import React from 'react'
	import PropTypes from 'prop-types'

	const GOOGLE_AD_MANAGER_ID = 'YOUR_ID'

	/**
	* It's used to generate ad element id. Make sure:
	* - only increment it ONCE per component
	* - only modify it on browser, not on server side
	*/
	let adElementCount = 0


	/**
	* Wrap Google Publisher Tag APIs as a React component
	*
	* Google Publisher Tag provide APIs to render Google Ad Manager's ads on page.
	* https://developers.google.com/doubleclick-gpt/reference
	* https://support.google.com/admanager/answer/1638622?ref_topic=4390040
	*
	* Ad manager ad unit doc: /docs/web/google-ad-manager/README.md
	*/
	class GoogleAdManagerAdUnit extends React.Component {
	constructor(props) {
	super(props)
	this.state = {
	/**
	* Ad element id
	*
	* Google Publisher Tag use this id to render ad to corresponding element. When using
	* Ad Manager to generate ad tag for an ad unit, the id would look like
	* "div-gpt-ad-1551835293521-0". We can use this static id as ad element's id.
	* However, if there are multiple ad elements rendering the same ad unit in one page,
	* we must provide multiple unique id for each ad element.
	*
	* Therefore, istead of using the id provided by Ad Manager. This component use a
	* global variable to generate ids. In the whole lifecyle of a single page application
	* we can generate up to 9007199254740991 unique ids(the maximum of Javascript's
	* number), and it should be sufficient.
	*/
	id: null,
	}
	}

	componentDidMount() {
	this.setState({id: `gpt-ad-${ adElementCount++ }`}) // eslint-disable-line no-underscore-dangle
	}

	componentDidUpdate(_prevProps, prevState) {
	if (prevState.id === null && this.state.id) {
	googletag.cmd.push(() => {
	this.slot = googletag.defineSlot(
	`/${ GOOGLE_AD_MANAGER_ID }/${ this.props.adUnitId }`,
	[this.props.width, this.props.height],
	this.state.id,
	)
	this.slot.addService(googletag.pubads())

	if (this.props.shouldCollapseWhenEmpty) {
	this.slot.setCollapseEmptyDiv(true)
	}

	googletag.enableServices()
	googletag.display(this.slot)
	})
	}
	}

	componentWillUnmount() {
	googletag.cmd.push(() => {
	googletag.destroySlots([this.slot])
	})
	}

	render() {
	return (
	<div id={this.state.id}
	className={this.props.className}
	style={{
	height: `${ this.props.height }px`,
	width: `${ this.props.width }px`,
	}}
	/>
	)
	}
	}

	GoogleAdManagerAdUnit.propTypes = {
	height: PropTypes.number.isRequired,
	width: PropTypes.number.isRequired,
	className: PropTypes.string,
	adUnitId: PropTypes.string.isRequired,

	/** The ad might be empty. Sometimes collapse the ad element is better for layout */
	shouldCollapseWhenEmpty: PropTypes.bool,
	}

	GoogleAdManagerAdUnit.defaultProps = {
	shouldCollapseWhenEmpty: false,
	}

	export default GoogleAdManagerAdUnit
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Google Ad Manager Ad Unit Example</title>
	</head>
	<body>
	<script src="https://www.googletagservices.com/tag/js/gpt.js" async></script>
	<script>
	var googletag = googletag \|\| {};
	googletag.cmd = googletag.cmd \|\| [];
	</script>
	</body>
	</html>