如何在 gatsby 网站中实施 Google Ad Manager又名 DFP？

问题描述

为了在 gastby.js 网站上投放 GAM/DFP 广告，我应该将此代码放在头部：

<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>

正文中的这段代码，我想在其中展示广告：

<!-- /22274312948/lm1_lb1 -->
<div id='div-gpt-ad-1614985862735-0' style='width: 728px; height: 90px;'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1614985862735-0'); });
  </script>
</div>

我的 gatsby 网站基于 MDX 文件，我想通过从 MDX 文件本身调用它们来在段落之间放置广告。

解决方法

<head> 脚本可以使用 <Helmet> 组件放置在任何 React（Gatsby）应用程序中。基本上，所有内容都包含在其中，放置在应用程序的 <head> 中。因此，在任何组件中，例如，<Layout> 您可以：

import React from "react";
import {Helmet} from "react-helmet";

const Layout = ({ children }) => {
  return <section>
    <Helmet>
      <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>
    </Helmet>
    <Header />
    <main>{children}</main>
  </section>;
};

当 dealing with global objects such as window or document in Gatsby 在 React 的生命周期之外时要小心，它可能会导致水化问题和警告。因此，其中一些在 SSR 期间不可用（Server-Side Rendering）如果您可以使用 Gatsby 插件而不是手动添加脚本，我强烈建议这样做，例如，使用 gatsby-plugin-google-adsense，只需使用：

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@isamrish/gatsby-plugin-google-adsense`,options: {
        googleAdClientId: "YOUR_GOOGLE_ADSENSE_TRACKING_ID",head: false // Optional
      }
    }
  ]
};

关于您的 MDX 脚本，由于您的 MDX 文件允许您嵌入 JSX 逻辑（因此得名），您可以将其添加到任何您想要的位置：

import { Box,Heading,Text } from 'somewhere'

# Here is a JSX block

It is using imported components!

<Box>
  <Heading>Here's a JSX block</Heading>
  <Text>It's pretty neat</Text>
  <YourScriptComponent />
</Box>

在您的 YourScriptComponent.js 中，您可以像添加任何其他组件一样添加脚本，例如：

const YourScriptComponent = () =>{

return <>
    <!-- /22274312948/lm1_lb1 -->
    <div id='div-gpt-ad-1614985862735-0' style='width: 728px; height: 90px;'>
      <script>
        googletag.cmd.push(function() { googletag.display('div-gpt-ad-1614985862735-0'); });
      </script>
    </div>
</>
}

为可能提供帮助的人更新最终修复问题。上述解决方法显示了在 Gatsby/React 站点中添加 GAM 广告的路径。这个想法是使用 MDX 导入一个自定义组件，该组件加载包含广告本身的基于承诺的组件/模块。类似的东西：

---

import DFPWrapper from '../../../src/components/DFPWrapper';

This is the body of the markdown

<DFPWrapper />

在那里，您可以导入自己的或第三方的依赖项，例如 react-gpt：

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','div-gpt-ad-1614985862735-0').addService(googletag.pubads());
          googletag.pubads().enableSingleRequest();
          googletag.enableServices();`}
      </script>
    </Helmet>
    <div>
      <GPT adUnitPath='/22274312948/lm1_lb1' slotSize={[728,90]} />
    </div>
  </>
}

react-gpt 所需的信息存储在这一行：

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

gatsby google-ad-manager google-dfp gpt reactjs reactjs reactjs reactjs