Merge pull request #226 from theonion/mobile-ad-inventory

Mobile ad inventory

bulbs/ads/static/js/mobile-ad-placer.js

@@ -0,0 +1,28 @@
+'use strict';
+var _ = require('lodash/lodash');
+var adHtml = '<div class="dfp dfp-slot-inread" data-ad-unit="inread"></div>';
+
+
+var MobileAdPlacer = {
+  placeAds: function () {
+    var body = $('body');
+    var paragraphs = body.find('p');
+    var wordCount = 0;
+    var adsPlaced = 0;
+
+    for (var i = 0; i < paragraphs.length; i++) {
+      var paragraphLength = _.words($(paragraphs[i]).html()).length;
+      wordCount = wordCount + paragraphLength;
+
+      if(wordCount > 350 && adsPlaced < 4) {
+        // place ad
+        $(paragraphs[i]).after(adHtml);
+        wordCount = 0;
+        adsPlaced++;
+      }
+    }
+    window.ads.loadAds();
+  },
+};
+
+module.exports = MobileAdPlacer;

bulbs/ads/static/js/mobile-ad-placer.test.js

@@ -0,0 +1,56 @@
+describe('MobileAdPlacer', function () {
+  var mobileAdPlacer = require('./mobile-ad-placer');
+  var faker = require('faker');
+
+  var article = '<section class="article-text"></section>'
+  var paragraph351 = '<p>' + faker.lorem.words(351) + '</p>';
+  var paragraph20 = '<p>' + faker.lorem.words(20) + '</p>';
+
+  beforeEach(function () {
+    $('body').append(article);
+    window.ads = {loadAds: function() { return }};
+  });
+
+  afterEach(function () {
+    $('.article-text').remove();
+  });
+
+  it('places ad after 350 words', function () {
+    $('.article-text').append(paragraph351);
+    mobileAdPlacer.placeAds();
+    var articleContents = $('.article-text').children();
+    expect($(articleContents[1]).attr('class')).to.equal("dfp dfp-slot-inread");
+  });
+
+  it('places multiple ads', function () {
+    $('.article-text').append(paragraph351);
+    $('.article-text').append(paragraph351);
+    adElement = document.createElement('ad');
+    mobileAdPlacer.placeAds(adElement);
+    var ads = $('.article-text').find('.dfp-slot-inread');
+    expect(ads.length).to.equal(2);
+  });
+
+  it('only places ads after paragraph breaks', function () {
+    adElement = document.createElement('ad');
+    var bigAssParagraph = '<p>' + faker.lorem.words(1000) + '</p>';
+    $('.article-text').append(bigAssParagraph);
+
+    mobileAdPlacer.placeAds(adElement);
+    var articleContents = $('.article-text').children();
+    // sanity check ad is placed
+    expect($('.article-text').find('.dfp').length).to.equal(1);
+    // not placed within p element
+    expect($('p').find('.dfp').length).to.equal(0);
+  });
+
+  it('places no more than 4 ads', function () {
+    adElement = document.createElement('ad');
+    for(var i = 0; i < 5; i++) {
+      $('.article-text').append(paragraph351);
+    }
+    mobileAdPlacer.placeAds();
+    var ads = $('.article-text').find('.dfp-slot-inread');
+    expect(ads.length).to.equal(4);
+  });
+});

package.json

@@ -4,6 +4,7 @@
   "devDependencies": {
     "browserify": "^13.0.1",
     "chai": "^3.4.1",
+    "faker": "^3.1.0",
     "jquery": "^2.2.1",
     "karma": "^0.13.19",
     "karma-bower": "^1.0.1",