如何在AngularJS应用中使用DFP（自营广告）定向站点URL并传入动态页面地址

解决方案 #

你现有代码已经实现了基础的URL参数传递，针对AngularJS单页应用场景，按以下步骤调整即可实现路由切换时动态更新URL/页面名称参数：

1. 先修正基础DFP代码的错误

你现有代码里残留了enter code here冗余字符，先清理后的初始化代码如下：

window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function () {
    // 定义广告位
    googletag.defineSlot('/14616973/cbcs_dt_1_728x90_1', [728, 90], 'div-gpt-ad-1604917677506-1').addService(googletag.pubads());
    googletag.defineSlot('/14616973/cbcs_dt_2_728x90_2', [728, 90], 'div-gpt-ad-1604917677506-2').addService(googletag.pubads());
    googletag.defineSlot('/14616973/cbcs_dt_3_300x250_1', [300, 250], 'div-gpt-ad-1604917677506-3').addService(googletag.pubads());
    googletag.defineSlot('/14616973/cbcs_dt_4_300x600_1', [300, 600], 'div-gpt-ad-1604917677506-4').addService(googletag.pubads());
    googletag.defineSlot('/14616973/cbcs_mb_1_300x250_1', [300, 250], 'div-gpt-ad-1604918658528-1').addService(googletag.pubads());
    googletag.defineSlot('/14616973/cbcs_mb_1_300x250_2', [300, 250], 'div-gpt-ad-1604918658528-2').addService(googletag.pubads());
    googletag.defineSlot('/14616973/cbcs_mb_3_300x600_3', [300, 600], 'div-gpt-ad-1604918658528-3').addService(googletag.pubads());
    
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
});

2. AngularJS路由监听实现动态参数传递

因为AngularJS是单页应用，路由切换时页面不会刷新，需要监听路由变化事件，动态更新DFP的定向参数并刷新广告：

• 如果你使用的是ngRoute，在应用的run块中添加如下代码：

angular.module('yourAppName', [])
.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function() {
        googletag.cmd.push(function() {
            // 获取当前最新路径
            var pathname = window.location.pathname;
            var length = 40;
            var url = pathname.substring(1, length).replace(/[!@#$%^&*/()_-]/g, "");
            // 提取页面名称（取路径最后一段）
            var pageName = pathname.split('/').pop() || 'home';
            
            // 更新定向参数
            googletag.pubads().setTargeting('url', [url])
                              .setTargeting('Page', [pageName])
                              .setTargeting('Sub_Category', [])
                              .setTargeting('Cat', [])
                              .setTargeting('search', []);
            // 刷新广告，加载对应定向的素材
            googletag.pubads().refresh();
        });
    });
}]);

• 如果你使用的是ui-router，只需要把监听的事件名换成$stateChangeSuccess即可。

注意事项

• 如果你需要在iframe中嵌入广告，保留原来的window.parent.location.pathname获取父页面路径即可，普通场景直接用window.location.pathname
• 路径的正则替换规则可以根据你的业务定向需求调整，不需要的特殊字符过滤规则可以删除

内容的提问来源于stack exchange，提问作者SALEEM USMANI