在现代网站开发中，广告系统需要是一个必备功能。而 Google 发布的 DFP 就是一个非常受欢迎的方案。为了方便使用 DFP，在 Node.js 的生态圈中也有许多相应的 npm 包我们可以使用。本文主要介绍一个叫做 we-plugin-google-dfp 的 npm 包。
什么是 we-plugin-google-dfp？
we-plugin-google-dfp 是一个 Node.js 的模块，提供为 we.js（一个业余开发的 Node.js Web 框架）开发的 DFP 插件。它可以帮助我们在我们的 Node.js 应用中方便地集成 DFP，并提供了相关的 API 接口。通过该插件，我们可以在我们的网站上集成广告，并且可以更方便地管理广告投放。
we-plugin-google-dfp 的安装
可以通过 npm 工具来安装 we-plugin-google-dfp.
npm install we-plugin-google-dfp --save
we-plugin-google-dfp 的基本使用
首先在项目根目录的 config/local.js 中添加如下配置：
-- -------------------- ---- -------
-------------- - -
-------- -
----------------------- -
------------ ------------------
----------- -----------------
-
-
-- -----
--编写广告页的视图
mathjax-ad.hbs 的内容。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-HERE_THE_AD_REST_CODE"
data-ad-slot="HERE_THE_AD_UNIT_SLOT_ID"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>我们还需要在应用中创建一个放置广告的视图，比如添加以下视图：
-- -------------------- ---- -------
-- --------------------------------------
------- ----- ------------------------------------------------------------------------
---- -------------------
-----------------------------------------------------
---------------------------------------------
----------------------------------------------
--------
------------ - ------------------ -- -------------
---------最后，在想要展示 DFP 广告的地方（比如博客详情页面中）载入该视图。
we-plugin-google-dfp 的指令
we-plugin-google-dfp 提供了一个名为 dfpinject 的指令。该指令可以用来在我们的页面上注入 DFP 的 JavaScript 代码。在我们的视图文件中，我们可以像下面这样来使用它：
-- -------------------- ---- -------
--------- -----
------
------
-------------
---- ---- ---
-------
------
---- ---- --- ---
-------
-------使用这个指令，我们可以在我们的页面上方便地集成 DFP，并根据需要进行相应的配置。例如，我们可以设定广告位的位置，设定广告的大小、类型等。
we-plugin-google-dfp 的 API 接口
we-plugin-google-dfp 提供了一些 API 接口，可以更方便地进行 DFP 的操作。比如：
dfp.ad(client, slotName, adSizes): 用于在页面上添加一个广告块。dfp.setTargeting(key, value): 用于设定广告的一些基本信息。该信息会影响到广告的定向。dfp.showAds(): 用于在页面上展示已添加的广告块。
下面是一个使用 dfp.ad 的示例：
const ad = dfp.ad("ca-pub-1234567890", "exampleSlotName", [[320, 50], [120, 600]]);总结
通过本文，我们可以学习到如何使用 we-pluing-google-dfp 这个 npm 包来方便地集成 DFP。我们可以在我们的 Node.js 应用中，方便地添加广告、设定广告的基本信息，并且在页面上展示广告。有了这个 npm 包的帮助，我们可以更加快速地集成 DFP，并更好地管理我们的广告投放。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562cc81e8991b448e015e