Add MRAID viewability support to bURL trigger (#142)

* Added MRAID viewable triggers for burl to reduce impression discrepancies * Added MRAID getstate check
prebid · Jul 9, 2021 · 2e1cbeb · 2e1cbeb
1 parent 7f290c2
commit 2e1cbeb
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 8 deletions.
diff --git a/src/renderingManager.js b/src/renderingManager.js
@@ -214,6 +214,22 @@ export function newRenderingManager(win, environment) {
         if (bidObject.nurl) {
           ad += utils.createTrackPixelHtml(decodeURIComponent(bidObject.nurl));
         }
+        if (bidObject.burl) {
+          let triggerBurl = function(){ utils.triggerPixel(bidObject.burl); };
+          if(isMobileApp) {
+            let mraidScript = utils.loadScript(win, 'mraid.js',
+              function() { // Success loading MRAID
+                let result = registerMRAIDViewableEvent(triggerBurl);
+                if (!result) {
+                  triggerBurl(); // Error registering event
+                }
+              },
+              triggerBurl // Error loading MRAID
+              );
+          } else {
+            triggerBurl(); // Not a mobile app
+          }
+        }
         utils.writeAdHtml(ad);
       } else if (bidObject.nurl) {
         if(isMobileApp) {
@@ -227,9 +243,6 @@ export function newRenderingManager(win, environment) {
           utils.writeAdUrl(nurl, width, height);
         }
       }
-      if (bidObject.burl) {
-        utils.triggerPixel(bidObject.burl);
-      }
     }
   };
 
@@ -301,6 +314,51 @@ export function newRenderingManager(win, environment) {
     }
   }
 
+  function registerMRAIDViewableEvent(callback) {
+
+    function exposureChangeListener(exposure) {
+      if (exposure > 0) {
+        mraid.removeEventListener('exposureChange', exposureChangeListener);
+        callback();
+      }
+    }
+
+    function viewableChangeListener(viewable) {
+      if (viewable) {
+        mraid.removeEventListener('viewableChange', viewableChangeListener);
+        callback();
+      }
+    }
+
+    function registerViewableChecks() {
+      if (win.MRAID_ENV && parseFloat(win.MRAID_ENV.version) >= 3) {
+        mraid.addEventListener('exposureChange', exposureChangeListener);
+      } else if(win.MRAID_ENV && parseFloat(win.MRAID_ENV.version) < 3) {
+        if (mraid.isViewable()) {
+          callback();
+        } else {
+          mraid.addEventListener('viewableChange', viewableChangeListener);
+        }
+      }
+    }
+
+    function readyListener() {
+      mraid.removeEventListener('ready', readyListener);
+      registerViewableChecks();
+    }
+
+    if (win.mraid && win.MRAID_ENV) {
+      if (mraid.getState() == 'loading') {
+        mraid.addEventListener('ready', readyListener);
+      } else {
+        registerViewableChecks();
+      }
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   return {
     renderAd
   }

diff --git a/src/utils.js b/src/utils.js
@@ -56,27 +56,34 @@ export function getUUID() {
   return uuid;
 };
 
-export function loadScript(currentWindow, tagSrc, callback) {
+export function loadScript(currentWindow, tagSrc, successCallback, errorCallback) {
   let doc = currentWindow.document;
   let scriptTag = doc.createElement('script');
   scriptTag.type = 'text/javascript';
 
-  // Execute a callback if necessary
-  if (callback && typeof callback === 'function') {
+  // Execute success callback if necessary
+  if (successCallback && typeof successCallback === 'function') {
     if (scriptTag.readyState) {
       scriptTag.onreadystatechange = function() {
         if (scriptTag.readyState === 'loaded' || scriptTag.readyState === 'complete') {
           scriptTag.onreadystatechange = null;
-          callback();
+          successCallback();
         }
       };
     } else {
       scriptTag.onload = function() {
-        callback();
+        successCallback();
       };
     }
   }
 
+  // Execute error callback if necessary
+  if (errorCallback && typeof errorCallback === 'function') {
+    scriptTag.onerror = function() {
+      errorCallback();
+    };
+  }
+
   scriptTag.src = tagSrc;
 
   //add the new script tag to the page