Adding Aniview campaigns manager support (#35657)

* Adding Aniview campaigns manager support * added refresh interval to aniview amp-ad * added extra height logic for video ad to fix CLS * deleted extra height logic for ad block outside the media Co-authored-by: Oleksandr Golovatyi <golovatuy@gmail.com>
ampproject · Dec 6, 2021 · 90df4c8 · 90df4c8
1 parent 32f415a
commit 90df4c8
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 20 deletions.
diff --git a/extensions/amp-apester-media/0.1/monetization/companion/video.js b/extensions/amp-apester-media/0.1/monetization/companion/video.js
@@ -2,8 +2,6 @@ import {Services} from '#service';
 import {createElementWithAttributes} from '#core/dom';
 import {dict, getValueForExpr} from '#core/types/object';
 
-const ALLOWED_AD_PROVIDER = 'sr';
-
 /**
  * @param {!JsonObject} media
  * @param {!AmpElement} apesterElement
@@ -21,29 +19,53 @@ export function handleCompanionVideo(media, apesterElement, consentObj) {
   const position = getCompanionPosition(
     /**@type {!JsonObject}*/ (videoSettings)
   );
-
   if (
-    !companionCampaignOptions ||
     !videoSettings ||
-    !videoSettings['enabled'] ||
-    videoSettings['provider'] !== ALLOWED_AD_PROVIDER ||
+    !videoSettings.enabled ||
     !position ||
     position === 'floating'
   ) {
     return;
   }
-  const macros = getSrMacros(
-    media,
-    companionCampaignOptions['companionCampaignId'],
-    apesterElement,
-    consentObj
-  );
-  addCompanionSrElement(
-    videoSettings['videoTag'],
-    position,
-    /** @type {!JsonObject} */ (macros),
-    apesterElement
-  );
+  const provider = videoSettings['provider'];
+  switch (provider) {
+    case 'sr': {
+      const companionCampaignId = companionCampaignOptions?.companionCampaignId;
+      const {videoTag} = videoSettings;
+
+      if (!companionCampaignId || !videoTag) {
+        return;
+      }
+      const macros = getSrMacros(
+        media,
+        companionCampaignId,
+        apesterElement,
+        consentObj
+      );
+      addCompanionSrElement(
+        videoTag,
+        position,
+        /** @type {!JsonObject} */ (macros),
+        apesterElement
+      );
+      break;
+    }
+    case 'aniview': {
+      const {playerOptions = {}} = videoSettings;
+      if (!playerOptions.aniviewChannelId) {
+        return;
+      }
+      addCompanionAvElement(
+        playerOptions,
+        position,
+        apesterElement,
+        consentObj
+      );
+      break;
+    }
+    default:
+      break;
+  }
 }
 
 /**
@@ -66,6 +88,50 @@ function getCompanionPosition(video) {
   return null;
 }
 
+/**
+ * @param {!JsonObject} playerOptions
+ * @param {string} position
+ * @param {!AmpElement} apesterElement
+ * @param {!JsonObject} consentObj
+ */
+function addCompanionAvElement(
+  playerOptions,
+  position,
+  apesterElement,
+  consentObj
+) {
+  const size = getCompanionVideoAdSize(apesterElement);
+  const refreshInterval = 30;
+  const ampAvAd = createElementWithAttributes(
+    /** @type {!Document} */ (apesterElement.ownerDocument),
+    'amp-ad',
+    dict({
+      'width': size.width,
+      'height': size.height,
+      'type': 'aniview',
+      'data-publisherid': '5fabb425e5d4cb4bbc0ca7e4',
+      'data-channelid': playerOptions.aniviewChannelId,
+      'data-enable-refresh': `${refreshInterval}`,
+    })
+  );
+
+  if (consentObj['gdpr']) {
+    ampAvAd['data-av_gdpr'] = consentObj['gdpr'];
+    ampAvAd['data-av_consent'] = consentObj['user_consent'];
+  }
+
+  ampAvAd.classList.add('i-amphtml-amp-apester-companion');
+
+  const relativeElement =
+    position === 'below' ? apesterElement.nextSibling : apesterElement;
+  apesterElement.parentNode.insertBefore(ampAvAd, relativeElement);
+
+  Services.mutatorForDoc(apesterElement).requestChangeSize(
+    ampAvAd,
+    size.height
+  );
+}
+
 /**
  * @param {string} videoTag
  * @param {string} position
@@ -100,8 +166,7 @@ function addCompanionSrElement(videoTag, position, macros, apesterElement) {
 
   Services.mutatorForDoc(apesterElement).requestChangeSize(
     ampBladeAd,
-    size.height,
-    /* newWidth */ undefined
+    size.height
   );
 }
 

diff --git a/extensions/amp-apester-media/0.1/test/test-amp-apester-monetization.js b/extensions/amp-apester-media/0.1/test/test-amp-apester-monetization.js
@@ -19,6 +19,8 @@ describes.realWin(
     let docInfo;
     const queryAmpAdBladeSelector = (myDoc) =>
       myDoc.querySelector('amp-ad[type=blade]');
+    const queryAmpAdAniviewSelector = (myDoc) =>
+      myDoc.querySelector('amp-ad[type=aniview]');
     const queryAmpAdDisplaySelector = (myDoc) =>
       myDoc.querySelector('amp-ad[type=doubleclick]');
 
@@ -84,6 +86,28 @@ describes.realWin(
       expect(srAboveAd).to.exist;
       expect(baseElement.previousSibling).to.be.equal(srAboveAd);
     });
+    it('Should show an Aniview companion ad below', async () => {
+      const media = createCampaignData({
+        display: false,
+        avAbove: false,
+        avBelow: true,
+      });
+      await handleCompanionAds(media, baseElement);
+      const avAdBelow = queryAmpAdAniviewSelector(doc);
+      expect(avAdBelow).to.exist;
+      expect(baseElement.nextSibling).to.be.equal(avAdBelow);
+    });
+    it('Should show an Aniview companion ad above', async () => {
+      const media = createCampaignData({
+        display: false,
+        avAbove: true,
+        avBelow: false,
+      });
+      await handleCompanionAds(media, baseElement);
+      const avAboveAd = queryAmpAdAniviewSelector(doc);
+      expect(avAboveAd).to.exist;
+      expect(baseElement.previousSibling).to.be.equal(avAboveAd);
+    });
     it('Should show an SR companion above with display companion', async () => {
       const media = createCampaignData({
         display: true,
@@ -125,6 +149,8 @@ describes.realWin(
 );
 
 function createCampaignData({
+  avAbove,
+  avBelow,
   bottomAd,
   disabledAmpCompanionAds,
   display,
@@ -145,6 +171,9 @@ function createCampaignData({
       },
       'enabled': false,
       'video': {
+        'playerOptions': {
+          'aniviewChannelId': '5fad4ac42cd6d91dcb6e50e9',
+        },
         'videoTag': '5d14c0ded1fb9900016a3118',
         'enabled': false,
         'floating': {
@@ -183,10 +212,22 @@ function createCampaignData({
   }
   if (srAbove) {
     campaignData.companionOptions.video.enabled = true;
+    campaignData.companionOptions.video.provider = 'sr';
     campaignData.companionOptions.video.companion.enabled = true;
   }
   if (srBelow) {
     campaignData.companionOptions.video.enabled = true;
+    campaignData.companionOptions.video.provider = 'sr';
+    campaignData.companionOptions.video.companion_below.enabled = true;
+  }
+  if (avAbove) {
+    campaignData.companionOptions.video.enabled = true;
+    campaignData.companionOptions.video.provider = 'aniview';
+    campaignData.companionOptions.video.companion.enabled = true;
+  }
+  if (avBelow) {
+    campaignData.companionOptions.video.enabled = true;
+    campaignData.companionOptions.video.provider = 'aniview';
     campaignData.companionOptions.video.companion_below.enabled = true;
   }
   if (disabledAmpCompanionAds) {