介绍
angular-dfp 是一个 AngularJS 模块，用于在 web 应用中添加 Google DoubleClick for Publishers（DFP）广告。它提供了一组指令和服务来帮助您轻松地在您的应用程序中集成和管理 DFP 广告。
DFP 是一个广告管理平台，由 Google 开发，它允许您在网站上展示广告，从而为您带来收入。使用 angular-dfp，您可以轻松地将广告集成到您的 AngularJS 应用程序中。
在本教程中，我们将介绍如何使用 npm 包 angular-dfp 来集成 Google DFP 广告。我们将覆盖以下主题：
- 安装和配置
- 如何在您的应用程序中使用 angular-dfp
- 如何创建和显示广告
- 如何在广告中添加事件跟踪
安装和配置
要开始使用 angular-dfp，您需要先在您的应用程序中安装它。您可以使用 npm 安装该包：
npm install angular-dfp
安装完成后，您需要在您的应用程序中添加它。您可以按照以下方式添加它：
angular.module('yourApp', ['dfp'])如何在您的应用程序中使用 angular-dfp
一旦您安装和配置了 angular-dfp，您就可以在您的应用程序中使用它来添加 DFP 广告。首先，您需要使用 dfp-ad 指令创建一个广告。该指令的用法如下：
<dfp-ad ad-unit="/path/to/ad/unit"></dfp-ad>
ad-unit 是您在 DFP 中创建的广告单元的路径。您可以在 DFP 控制面板中创建广告单元。例如，如果您在 DFP 中创建了一个广告单元 /1234/ad-unit，您可以在 HTML 中添加以下指令来显示广告：
<dfp-ad ad-unit="/1234/ad-unit"></dfp-ad>
如何创建和显示广告
一旦您定义了广告单元，您就可以在您的应用程序中添加广告。使用 dfp-service，您可以在控制器和指令中管理和显示广告。
dfp-service 提供了以下方法：
refresh()：刷新广告。setTargeting(key, value)：向广告设置 targeting。setCategoryExclusion(category)：设置广告排除类别。setCollapseEmpty(collapse)：当广告没有内容可显示时折叠它。
要显示广告，您需要在您的控制器中注入dfp-service:
angular.module('yourApp')
.controller('yourController', function ($scope, dfpService) {
// your code here
});然后使用 refresh() 方法刷新广告：
dfpService.refresh();
您可以通过调用 setTargeting 方法向广告添加 targeting。例如，向广告添加主题：
dfpService.setTargeting('topic', 'sports');使用 setCategoryExclusion 指定要排除的类别：
dfpService.setCategoryExclusion('health');使用 setCollapseEmpty 指定是否折叠空广告：
dfpService.setCollapseEmpty(true);
如何在广告中添加事件跟踪
在使用广告时，您可能希望跟踪一些事件，例如广告的点击或展示。使用 dfp-ad 指令，您可以轻松地实现这些事件跟踪。
首先，您需要使用 dfp-creative 指令来定义广告素材：
<dfp-ad ad-unit="/path/to/ad/unit">
<dfp-creative size="300x250" click="vm.onClick()" impression="vm.onImpression()">
<img src="http://lorempixel.com/300/250/">
</dfp-creative>
</dfp-ad>在上面的代码中，我们定义了一个 300x250 大小的广告，并使用img标签作为广告素材。我们还使用了click和impression事件来跟踪广告的点击和展示。
示例代码
-- -------------------- ---- -------
--------- -----
----- ---------------
------
-------------- --- ---------------
-------
------
--------
----------- --- ------------
---------
------
------- ---------------------------
------------- -------------- -------------------- -------------------------------
---- -------------------------------------
---------------
---------
-------
--------
----------- ---- - -- -----------------
---------
------- ------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------
--------
----------------------- ---------
---------------------------------------------- ---------- -
--- -- - -----
---------- - ---------- -
--------------- -----------
--
--------------- - ---------- -
--------------- --------------
--
---
---------
-------
-------总结
使用 AngularJS 和 npm 包 angular-dfp，您可以轻松地将 DFP 广告集成到您的 web 应用程序中。本教程介绍了如何安装、配置和使用 angular-dfp，以及如何在广告中添加事件跟踪。现在，您可以开始使用 angular-dfp 来为您的网站创收。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601081e8991b448ddf36