个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
为了在 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 期间不可用(S-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 导入一个自定义组件，该组件加载一个包含广告本身的基于 promise 的组件/模块。像这样的东西:
---
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());
关于reactjs - 如何在 gatsby 网站中实现 Google Ad Manager(又名 DFP)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66511859/
25
4
0
我有一个场景，我们必须通过 Azure AD 对企业用户进行身份验证，但通过 Azure AD B2C 对外部用户进行身份验证——所有这些都来自同一个登录屏幕。 有一些 Web 应用程序将共享此功能。
在使用 Azure AD B2C 和 Azure AD B2B 之前，我通常会将应用程序添加到我们租户的 Azure AD 中，并且 Office 365 用户可以使用其帐户 (SSO) 访问应用程序
当 Azure Active Directory 信任访问本地 Active Directory 用户时，我们是否可以使用本地 AD 用户名(域限定的 sam 帐户名称，例如:cosmos\brahm
什么是在网站上展示广告的好托管广告管理器？ 我听说过OpenX ，但从未使用过。 最佳答案 我们使用名为 Ad Serving Solutions http://www.adservingsoluti
是否可以将用户从云 Azure Active Directory 同步到本地 AD？ On Premises 这里有点错误，因为它实际上是 Azure 中的虚拟网络，带有 Windows Server
我正在关注这里的答案:Multi-Tenant Azure AD Auth in Azure AD B2C with Custom Policies 以及这里的演练:https://github.co
我正在尝试使用/common Azure AD 端点在 Azure AD B2C 中使用 Azure AD Auth。根据How to sign in any Azure Active Directo
来自 Mercurial 文档: The manifest is the file that describes the contents of the repository at a particu
我正在尝试将 firebase admob 与 React Native 集成到我的应用程序中，一切都适用于 testID横幅 ('ca-app-pub-3940256099942544/293473
我有一个应用程序需要根据其本地 AD 通用名称来过滤权限。几点注意事项: Azure AD Connect 正在 OnPrem AD 和 Azure 之间同步数据 我已成功将登录用户的组信息从 Azu
我正在使用 blogspot 平台并在我的网站上使用了 Google Adsense。我想对齐一个自动 Adsense 广告，它根本不居中，而带有代码的广告则完全没有问题。它只是自动广告，有人可以帮助
为什么redirect URL必须完全匹配？在域级别进行匹配是否不足以提供适当的安全性？ 如果我有数百条路径怎么办？ 示例网址: https://myawesomesite.com https://m
我即将创建一个新的 Azure AKS 群集，并且希望将 AKS 与 Azure Key Vault 集成。几个月前，在学习阶段，我看到需要使用Azure AD pod管理的身份来做到这一点，但现在我
我正在尝试配置我的 Azure AD 以同步我的本地 AD DS，如果在 Microsoft Azure AD 中添加任何用户，它应该自动在我的本地 AD 中注册。 我已创建 Azure AD 并配置
我有大约 50 个用户的 Azure AD。这些用户是我们购买Office365时创建的。假设 Azure AD 上的域是 example.com。 ([email protected])在本地，我们
我正在尝试获取组 Azure AD 的名称，Azure 登录 (openId) 后的内部 token 我收到 json 格式的组 ID，但我需要组名称。 登录后的Json: Claims 尝试使用Gr
我们希望将 Azure AD B2C 用于我们的 Web 应用程序，以允许用户使用其公司 ADFS 帐户登录。 根据Azure Active Directory B2C: Add ADFS as a
首先，我无法了解为什么需要这些数据，也无法了解有关网络的细节。您必须相信我，除了运行 LDAP 查询的 PowerShell 脚本之外，没有其他方法可以获取这些数据。 我正在使用具有多个林和多个域的网
我是一个相当新的 PS 用户...正在寻求有关 powershell 脚本的帮助来获取用户所属的安全组列表。 描述我需要什么: 我有包含许多用户(samaccountnames)的输入列表(txt 文
我有两个要存储在目录中以供我的应用程序使用的声明。这些内容不可供用户编辑，但可用于应用程序从 token 中读取。 内置策略可以检索声明，但是，使用自定义策略检索这些声明没有取得任何成功。 通读文章“
我是一名优秀的程序员,十分优秀！