在 NextJS 中添加自动单位的 Google Ads 代码

Question

在 NextJS 中添加自动单位的 Google Ads 代码

我正在开发一个 nextjs 项目，我必须实现用于自动广告的 google AdSense 代码。

所以，我的谷歌广告代码就是这样的：

<script
  async
  src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADSENSE}`}
  crossOrigin="anonymous"
/>

Run Code Online (Sandbox Code Playgroud)

没有特定的广告单元代码。根据此脚本加载，Google 将自动添加广告。

在这种情况下，我将如何在我的 NextJS 项目中实现这一点，以确保广告在路线更改后继续正常工作？

目前，我看到的问题是，如果我只是将其放在头部_document.js，广告只会在完全重新加载时加载。有一些教程描述了如何在 NextJS 中实现 google Adsense，但它们都描述了为 Adsense 创建特定广告单元的情况，而不是单独基于此脚本的自动广告的情况。

非常感谢对此的任何意见。

Answer 1

Jac*_*cob 2

在 Nextjs 中实施 Adsense 自动广告时，最好在 _app.tsx 或 _app.jsx 中添加脚本标记

使用时<script></script>就是利用Nextjs内置标签进行优化。这是自动广告的实现：

//import Script tag
import Script from 'next/script'; 

//implementation 
<Script
  id="Absence-banner"
  async
  strategy="afterInteractive"
  onError={(e) => {
    console.error('Script failed to load', e);
  }}
  src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADSENSE}`}
  crossOrigin="anonymous"
/>

Run Code Online (Sandbox Code Playgroud)

编辑 12/8/23：由于 Nextjs 的更改，如果您正在使用appDir其中的某些内容可能无法按预期工作。

要实施 Adsense 将其添加到您的应用程序中，您必须将其放入基础layout.tsx或layout.jsx文件中。

您仍将使用 script 标签，但必须使用<head></head>文档的常规方式将其添加到 html 中。

import React from 'react';
import Script from 'next/script'; 

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
        <head> 
            <Script
                id="Absence-banner"
                async
                strategy="afterInteractive"
                onError={(e) => {
                    console.error('Script failed to load', e);
                }}
                src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADSENSE}`}
                crossOrigin="anonymous"
            />
        </head>
      <body>
        {children}
      </body>
    </html>
  );
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，7 月前
查看次数：	2184 次
最近记录：	1 年，9 月前