Code Monkey home page Code Monkey logo

ngdfp's Introduction

ngDfp

ngDfp is a simple library for Angular JS that allows you to add DoubleClick for Publishers tags to your Angular site.

Requirements

This library requires Angular JS 1.2 or higher. It might work with older versions but I can't guarantee it.

Getting Started

Just install via bower:

bower install ngDfp --save

or npm:

npm install ngDfp --save

Then, include it as a dependency:

angular.module('your.module', ['ngDfp'])

and configure your slots in your app's config:

.config(function (DoubleClickProvider) {
  DoubleClickProvider.defineSlot('/123456/Your_Slot', [100, 500], 'div-gpt-ad-1234567890123-0')
                     .defineSlot('/123456/Your_Slot', [300, 200], 'div-gpt-ad-1234567890123-1');
});

Now, to show an ad, simply use the ng-dfp-ad:

<div data-ng-dfp-ad="div-gpt-ad-1234567890123-0"></div>

Refreshing Ads

Ads can be refreshed with a global interval or individually. To configure a global interval:

// Refresh all ads every 30 seconds
DoubleClickProvider.setRefreshInterval(30000);

To refresh an ad individually you can do two things:

<!-- Refresh this ad every `refreshInterval` seconds -->
<div ng-dfp-ad="div-gpt-ad-1234567890123-0" ng-dfp-ad-refresh-interval="{{refreshInterval}}"></div>

Or programatically with the provider:

app.controller(function (DoubleClick) {
  DoubleClick.refreshAds('div-gpt-ad-1234567890123-0', 'div-gpt-ad-1234567890123-1');
});

Optionally, you can refresh an ad individually immediately or after a defined timeout:

<!-- Refresh this ad immediately -->
<div ng-dfp-ad="div-gpt-ad-1234567890123-0" ng-dfp-ad-refresh></div>
<!-- Refresh this ad after `refreshTimeout` seconds -->
<div ng-dfp-ad="div-gpt-ad-1234567890123-0" ng-dfp-ad-refresh-timeout="{{refreshTimeout}}"></div>

Hiding Emtpy Ads

Ads can be hidden by adding the attribute data-ng-dfp-ad-hide-when-empty to the ad tag. You have to specify the container of the ad using the data-ng-dfp-ad-container directive. This is useful if you contain the ad in a parent div with some styles. For example, the following snippet will hide itself when empty:

<div data-ng-dfp-ad="div-gpt-ad-1234567890123-0" data-ng-dfp-ad-hide-when-empty data-ng-dfp-ad-container></div>

And the following will hide the container

<div class="my-fancy-ad-container" data-ng-dfp-ad-container>
  <div data-ng-dfp-ad="div-gpt-ad-1234567890123-0" data-ng-dfp-ad-hide-when-empty></div>
</div>

Responsive Ads

You can use Google Publisher Tags (GPT) to build responsive ads that fit the browser your visitors use to view your website. This means that your ads will look good whether your visitors are using a desktop, tablet, or smartphone.
More information about Building Responsive Ads.

DoubleClickProvider.defineSlot('/123456/Your_Slot', [[970, 90], [728, 90], [88, 31]], 'div-gpt-ad-1431622560634-6');
DoubleClickProvider
    .defineSizeMapping('div-gpt-ad-1431622560634-6')
    .addSize([1024, 768], [970, 90])
    .addSize([980, 690], [728, 90])
    .addSize([640, 480], [728, 90])
    // Fits browsers of any size smaller than 640 x 480
    .addSize([0, 0], [88, 31]);

Minimizing

Closure Compiler is used to minimize the code. It is minimized using this command

closure-compiler --js_output_file=angular-dfp.min.js --compilation_level SIMPLE angular-dfp.js

Advanced optimizations are not used because as of now the AngularJS codebase does not support it.

Issues

Please file issues using GitHub's issue tracker.

Contributing

Pull requests are more than welcome!

ngdfp's People

Contributors

ianmurrays avatar jasonconway-williams avatar jsoprano avatar kohatang avatar lawnzapper avatar leonhardtdavid avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ngdfp's Issues

When is the best time to configure services?

I need to set targeting on the pubads() service. Is there a formal time I should do this?

googletag.pubads().setTargeting('section','example');
googletag.pubads().setTargeting('page','example');
googletag.pubads().setTargeting("site","example");
googletag.pubads().setTargeting("network","example");
googletag.pubads().enableVideoAds();
googletag.companionAds().setRefreshUnfilledSlots(true);

Support for callbacks?

I'd like to be able to make css changes based on the existence of an ad. I already hide when empty, but I need to also change padding on the parent container. Currently, I had to modify the source of the js and check it into my own code base to achieve this. Here's what I had to do, for reference:

.directive('ngDfpAdContainer', function () {
    return {
      restrict: 'A',
      controller: ['$element', function ($element) {
        function hide(mode) {
          if (mode === 'visibility') {
            $element.css('visibility', 'hidden');
          }
          else {
            $element.hide();
            $element.parent().parent().css('width', '0px'); // I added this
            $element.parent().parent().css('padding', '0px'); // I added this
          }
        }

        function show(mode) {
          if (mode === 'visibility') {
            $element.css('visibility', 'visible');
          }
          else {
            $element.parent().parent().css('width', '100%'); // I added this
            $element.show();
          }
        }

        this.$$setVisible = function (visible, mode) {
          if (visible) {
            show(mode);
          }
          else {
            hide(mode);
          }
        };
      }]
    };

Is there a more elegant solution?

Thanks!

Works with localhost?

Not sure if it's an issue on my side or issue on google's side or if anyone else had this problem. Does dfp generally work when you are on localhost?

As stupid as this question may seem, It worked for a while today, now again it's not showing ads. The request does get sent do and google responds with an empty ad.

how to set PageTargeting() dynamically

DoubleClickProvider.defineSlot('/530209488/Parties_1', [300, 100], 'div-gpt-ad-1470051144620-0')
.defineSlot('/530209488/Parties_2', [300, 100], 'div-gpt-ad-1470051144620-1')
.defineSlot('/530209488/Parties_3', [300, 100], 'div-gpt-ad-1470051144620-2');
DoubleClickProvider.setPageTargeting('city',localStorage.getItem('DFTcity'));

on changing the localStorage city value, the pageTargeting is not changing dynamically .
it is effecting after hard refreshing the page(this is due app.config() is re initializing at the time city value taking). How i can change pageTargeting from my controller.

Ad Targeting

Can you add documentation in the readme as to how slot targeting works?

Responsive Ads

My website is responsive and built using bootstrap 3.2. However I couldn't control the ads using ngDfp

This article suggest using multiple sizes
https://support.google.com/dfp_premium/answer/3423562?hl=en

But when I add this line in my angular code

DoubleClickProvider.defineSlot('/11xxx09/responsive_leaderboard', [[970, 90], [320, 50], [728, 90]], 'div-gpt-ad-14xxxxxxx51-0');

It always takes the first size ([970, 90] in that case).

How can I fix this? Does ngDfp support responsive ads or multiple ad sizes?

Ads do not refresh on route change

I have a big box ad on each sub page of my site. The ad displays properly on initial load but on route changes the ad won't reload and the area remains blank. My workaround is to call refreshAds() on $routeChangeSuccess events.

    $rootScope.$on '$routeChangeSuccess', (e, newRoute, oldRoute) ->
        DoubleClick.refreshAds 'div-gpt-ad-1234567890'

ng-dfp-ad-hide-when-empty doesn't work reliably

I've noticed that 'ng-dfp-ad-hide-when-empty' doesn't correctly detect when the advert isn't visible. I'm inspecting with the debug tools, and it still hides the div even when there is an advert inside.

Looking for maintainer

I'm looking for a maintainer for this project, since I don't have time to keep up with issues and to keep this up to date.

Responsive ads not working

I'm using almost the exact same code as what is in the readme (difference being that I'm using my IDs instead of the ones in the example) and I'm not seeing any responsive behavior.

It defaults all of my ads to the largest across the board.

Custom Params on initial and refresh

Is it possible to add cust_params when the slots are defined and refreshed? Maybe using $window.googletag.pubads().setTargeting(key, value)?

I want to send some targeting information to DFP.

Thanks in advance for your reply!

open link in other brower

I want to open the link that is vinculate in DFP ad, but it's opening in the app and I can't to back to the app

Google robot/spider fail

We are having some isses with Google indexer, because it doesn't load some js files, so the initialization of ngDfp fails and break js execution to get the page loaded.

My recommendation is to put a try catch on $get method, inside the callback function passed to

$interval.cancel dose not working

$interval.cancel dose not working, so $interval service still alive when come back with router.

I think it is necessary that $interval.cancel when DOM destroy. And $timeout too.

DoubleClick.refreshAds not working with multiple arguments

If I call
DoubleClick.refreshAds('ad-leaderboard', 'ad-leaderboard-sm', 'ad-square');

it only refreshes the first argument, the other two are ignored.

Calling

DoubleClick.refreshAds('ad-leaderboard-sm');
DoubleClick.refreshAds('ad-square');```

works as expected. Not sure if it's a bug or if you want to just adjust your readme.

Not an issue as such but a feature add

Firstly this project has been a life saver for me so thank you.
My issue has been and this could be because of my shady Angular experience but when defining slots on my implementation a call is made for all adverts even those out of view which has caused issue for my client and they asked me to disableInitialLoad(), I think this would be a handy feature to add to the project I have manually added it to the copy that I have googletag.pubads().disableInitialLoad(); and it seems to work but others may benefit from this too.
Thanks again.

Can I pass a custom callback function of my own?

I'm reading through the sourcecode and looking for a way to pass a callback function to check after the slot has rendered if it is empty, with the isEmpty method available on DFP.

I found where I can call that method in the source, but I'm looking for a way to pass a callback function when I define a slot.

Not an issue with the library, it does what it says. I'm trying to take a stab at this myself, but I can't see how it can be done.

Did anyone try this?

e.g. in my case, because currently the directives data-ng-dfp-ad-hide-when-empty data-ng-dfp-ad-container are not working for me and I need to hide my container.

I apologise if this is not the place for such questions, as it's not a technical issue more of a " does this feature exist " kind of thing.

Open Ad links in safari/chrome?

When clicked it appears that my DFP ads are being opened in the inappBrowser and the user is not able to return to the app without closing and reopening. Is there any way to force ad links to be open by the default device browser?

Cannot read property 'addService' of null Error

Hello

My ad is being displayed using dfp generated tags but it is not being displayed when I use ngDfp. The error I am getting the console when I use ngDFP is:

Uncaught TypeError: Cannot read property 'addService' of null    angular-dfp.js:57
(anonymous function)                                             angular-dfp.js:57
q                                                                angular.min.js:7
_initialize                                                      angular-dfp.js:56
(anonymous function)                                             angular-dfp.js:118

I'm using angular v1.3.0-beta.9

Inside ng-repeat

Is there a way to get adverts to show if they're inside an ng-repeat/ng-if block? I seem to consistently get black spaces at the moment.

Define slot later on

This may be a dupe of #4, but I need to define slots later on rather than in the module config. The ad's ids, tags, etc. are managed in our CMS and come down into the client application via a $resource service inside of a controller. I tried to hack the service returned via the DoubleClickProvider to update the slots array but no luck. Any tips for this matter would be greatly appreciated. Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.