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

Question

为了在 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 文件本身调用它们。

Answer 1

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

在 React 生命周期之外处理window或 Gatsby 中的document等全局对象时要小心，这可能会导致水合问题和警告。 因此，其中一些在 SSR 期间不可用（服务器-S ide R渲染）如果您可以使用 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', [728, 90], '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', [728, 90], 'div-gpt-ad-1614985862735-0').addService(googletag.pubads());

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

问题描述

1 个解决方案

解决方案1
1 2021-03-07 08:41:01

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

问题描述

1 个解决方案

解决方案1 1 2021-03-07 08:41:01

解决方案1
1 2021-03-07 08:41:01