3

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

4

1 回答 1

2

该<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 生命周期之外处理全局对象（例如Gatsbywindow或documentGatsby ）时要小心，这可能会导致水合问题和警告。因此，其中一些在 SSR 期间不可用（服务器端渲染）如果您可以使用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());
于 2021-03-07T08:41:01.223 回答