Add macro to track clicks (#196)

* added support for GAM macro %%CLICK_URL_UNESC%% * add tests for %%CLICK_URL_UNESC%% * add info about clickUrlUnesc in readme Co-authored-by: Michele Nasti <michele@rtk.io>
prebid · Jan 20, 2023 · 4a86a23 · 4a86a23
1 parent d7b728c
commit 4a86a23
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,8 @@ You can find a detailed explanations on the [Prebid Universal Creative](http://p
   ucTagData.hbPb = "%%PATTERN:hb_pb%%";
   ucTagData.hbFormat = "%%PATTERN:hb_format%%";
   ucTagData.adId = "%%PATTERN:hb_adid%%";
+  // if you're using GAM and want to track outbound clicks on native ads you can add this line
+  ucTagData.clickUrlUnesc = "%%CLICK_URL_UNESC%%";
   ucTagData.requestAllAssets = true;
 
   try {

diff --git a/src/nativeAssetManager.js b/src/nativeAssetManager.js
@@ -59,7 +59,21 @@ const assetTypeMapping = {
 const DEFAULT_CACHE_HOST = 'prebid.adnxs.com';
 const DEFAULT_CACHE_PATH = '/pbc/v1/cache';
 
-export function newNativeAssetManager(win, pubUrl) {
+const CLICK_URL_UNESC = `%%CLICK_URL_UNESC%%`;
+
+let clickUrlUnesc = '';
+
+export function newNativeAssetManager(win, nativeTag) {
+  const { pubUrl } = nativeTag;
+
+
+    // clickUrlUnesc contains the url to track clicks in GAM. we check if it 
+    // has been transformed, by GAM, in an URL. 
+    // if CLICK_URL_UNESC is the string "%%CLICK_URL_UNESC%%", we're not in GAM. 
+    if (nativeTag.clickUrlUnesc && nativeTag.clickUrlUnesc !== CLICK_URL_UNESC) {
+      clickUrlUnesc = nativeTag.clickUrlUnesc;
+    }
+
   const sendMessage = prebidMessenger(pubUrl, win);
   let callback;
   let errorCountEscapeHatch = 0;
@@ -289,6 +303,9 @@ export function newNativeAssetManager(win, pubUrl) {
     }
 
     if (data.message === 'assetResponse') {
+      // add GAM %%CLICK_URL_UNESC%% to the data object to be eventually used in renderers
+      data.clickUrlUnesc = clickUrlUnesc;
+
       const body = win.document.body.innerHTML;
       const head = win.document.head.innerHTML;
 
@@ -375,6 +392,10 @@ export function newNativeAssetManager(win, pubUrl) {
         }
       }
     }
+
+    //substitute CLICK_URL_UNESC with actual value
+    html = html.replaceAll(CLICK_URL_UNESC, bid.clickUrlUnesc || "");
+
     win.document.body.innerHTML += html;
     callback && callback();
     win.removeEventListener('message', replaceAssets);

diff --git a/src/nativeRenderManager.js b/src/nativeRenderManager.js
@@ -51,7 +51,7 @@ export function newNativeRenderManager(win) {
   let renderNativeAd = function(doc, nativeTag) {
     window.pbNativeData = nativeTag;
     sendMessage = prebidMessenger(nativeTag.pubUrl, win);
-    const nativeAssetManager = newNativeAssetManager(window, nativeTag.pubUrl);
+    const nativeAssetManager = newNativeAssetManager(window, nativeTag);
 
     if (nativeTag.hasOwnProperty('adId')) {
 

diff --git a/test/spec/nativeAssetManager_spec.js b/test/spec/nativeAssetManager_spec.js
@@ -40,11 +40,16 @@ const mockDocument = {
 };
 
 // creates mock postmessage response from prebid's native.js:getAssetMessage
-function createResponder(assets,url,template) {
+function createResponder(assets,url,template, clickUrlUnesc = '') {
   return function(type, listener) {
     if (type !== 'message') { return; }
 
-    const data = { message: 'assetResponse', adId: AD_ID, assets, adTemplate:template, rendererUrl:url  };
+    const data = { 
+      message: 'assetResponse', 
+      adId: AD_ID, assets, 
+      adTemplate:template, 
+      rendererUrl:url, 
+    };
     listener({ data: JSON.stringify(data), origin: ORIGIN});
   };
 }
@@ -86,8 +91,11 @@ function generateRenderer(assets) {
 describe('nativeAssetManager', () => {
   let win;
 
-  function makeManager() {
-    return newNativeAssetManager(win, ORIGIN);
+  function makeManager(args) {
+    return newNativeAssetManager(win, {
+      pubUrl: ORIGIN,
+      ...args
+    });
   }
 
   beforeEach(() => {
@@ -578,4 +586,64 @@ describe('nativeAssetManager', () => {
       expect(win.document.body.style.width).to.equal('600px');
     });
   });
+
+  describe('GAM macro %%CLICK_URL_UNESC%%', () => {
+    it("should remove %%CLICK_URL_UNESC%% if there's no variable set", () => {
+      const html = `<script>
+        let nativeTag = {};
+        nativeTag.adTemplate = "<div class=\"sponsored-post\">\r\n  <div class=\"thumbnail\"><\/div>\r\n  <div class=\"content\">\r\n  <h1>\r\n    <a href=\"%%CLICK_URL_UNESC%%##hb_native_linkurl##\" target=\"_blank\" class=\"pb-click\">##hb_native_title##<\/a>\r\n   <\/h1>\r\n    <p>##hb_native_body##<\/p>\r\n    \t<div class=\"attribution\">\r\n                   \t<img class=\"pb-icon\" src=\"##hb_native_image##\" alt=\"icon\" height=\"150\" width=\"50\">\r\n \t\r\n           \t<\/div>\r\n\t<\/div>\r\n<\/div>";
+        nativeTag.pubUrl = "https://www.url.com";
+        nativeTag.adId = "`+AD_ID+`";
+        nativeTag.requestAllAssets = true;
+        window.pbNativeTag.renderNativeAd(nativeTag);
+      </script>`;
+      win.pbNativeData = {
+      pubUrl : 'https://www.url.com',
+      adId : AD_ID,
+      adTemplate : '<div class=\"sponsored-post\">\r\n  <div class=\"thumbnail\"><\/div>\r\n  <div class=\"content\">\r\n  <h1>\r\n    <a href=\"%%CLICK_URL_UNESC%%##hb_native_linkurl##\" target=\"_blank\" class=\"pb-click\">##hb_native_title##<\/a>\r\n   <\/h1>\r\n    <p>##hb_native_body##<\/p>\r\n    \t<div class=\"attribution\">\r\n                   \t<img class=\"pb-icon\" src=\"##hb_native_image##\" alt=\"icon\" height=\"150\" width=\"50\">\r\n \t\r\n           \t<\/div>\r\n\t<\/div>\r\n<\/div>'
+      };
+
+      win.document.body.innerHTML = html;
+      win.addEventListener = createResponder([
+      { key: 'body', value: 'Body content' },
+      { key: 'title', value: 'new value' },
+      { key: 'clickUrl', value: 'http://www.example.com' },
+      { key: 'image', value: 'http://www.image.com/picture.jpg' },
+      ]);
+
+      const nativeAssetManager = makeManager();
+      nativeAssetManager.loadAssets(AD_ID);
+
+      expect(win.document.body.innerHTML).to.include(`<a href="http://www.example.com" target="_blank" class="pb-click">new value</a>`);
+    });
+
+    it("should substitute %%CLICK_URL_UNESC%% with clickUrlUnesc value", () => {
+      const html = `<script>
+        let nativeTag = {};
+        nativeTag.adTemplate = "<div class=\"sponsored-post\">\r\n  <div class=\"thumbnail\"><\/div>\r\n  <div class=\"content\">\r\n  <h1>\r\n    <a href=\"%%CLICK_URL_UNESC%%##hb_native_linkurl##\" target=\"_blank\" class=\"pb-click\">##hb_native_title##<\/a>\r\n   <\/h1>\r\n    <p>##hb_native_body##<\/p>\r\n    \t<div class=\"attribution\">\r\n                   \t<img class=\"pb-icon\" src=\"##hb_native_image##\" alt=\"icon\" height=\"150\" width=\"50\">\r\n \t\r\n           \t<\/div>\r\n\t<\/div>\r\n<\/div>";
+        nativeTag.pubUrl = "https://www.url.com";
+        nativeTag.adId = "`+AD_ID+`";
+        nativeTag.requestAllAssets = true;
+        window.pbNativeTag.renderNativeAd(nativeTag);
+      </script>`;
+      win.pbNativeData = {
+      pubUrl : 'https://www.url.com',
+      adId : AD_ID,
+      adTemplate : '<div class=\"sponsored-post\">\r\n  <div class=\"thumbnail\"><\/div>\r\n  <div class=\"content\">\r\n  <h1>\r\n    <a href=\"%%CLICK_URL_UNESC%%##hb_native_linkurl##\" target=\"_blank\" class=\"pb-click\">##hb_native_title##<\/a>\r\n   <\/h1>\r\n    <p>##hb_native_body##<\/p>\r\n    \t<div class=\"attribution\">\r\n                   \t<img class=\"pb-icon\" src=\"##hb_native_image##\" alt=\"icon\" height=\"150\" width=\"50\">\r\n \t\r\n           \t<\/div>\r\n\t<\/div>\r\n<\/div>',
+      };
+
+      win.document.body.innerHTML = html;
+      win.addEventListener = createResponder([
+      { key: 'body', value: 'Body content' },
+      { key: 'title', value: 'new value' },
+      { key: 'clickUrl', value: 'http://www.example.com' },
+      { key: 'image', value: 'http://www.image.com/picture.jpg' },
+      ], null, null, );
+
+      const nativeAssetManager = makeManager({ clickUrlUnesc: 'https://will.redirect/?to='});
+      nativeAssetManager.loadAssets(AD_ID);
+
+      expect(win.document.body.innerHTML).to.include(`<a href="https://will.redirect/?to=http://www.example.com" target="_blank" class="pb-click">new value</a>`);
+    });
+  });
 });