Google Publisher Tag Conflict with AEM component

[starkc18095558]

I tired to implement Google Publisher Tag (a google Adsense plugin) component. But get some AEM mechanism conflicts.

More about gpt, please look here : Google Publisher Tag samples - DoubleClick for Publishers Help

As usually, we just need follow google sample to add their code, everything will be fine. But when GPT code add into AEM, it's boom. A very hot problem confused me several days, I give up try to solve it by myself, hope someone can help me in here.

I am using AEM 6.2 and I use granite.

I created a component and add html code and html code into render.html as usual.

   <script>

   var googletag = googletag || {};

   googletag.cmd = googletag.cmd || [];

  (function () {

   var gads = document.createElement("script");

   gads.async = true;

   gads.type = "text/javascript";

   var useSSL = "https:" == document.location.protocol;

   gads.src = (useSSL ? "https:" : "http:") + "//www.googletagservices.com/tag/js/gpt.js";

   var node = document.getElementsByTagName("script")[0];

   node.parentNode.insertBefore(gads, node);

  })();

   </script>

   <script type="text/javascript">

   googletag.cmd.push(function () {

   var adSlot1 = googletag.defineSlot('/6355419/Travel/Europe/France/Paris', [300, 250], "banner1");

   adSlot1.addService(googletag.pubads()); googletag.enableServices();

  });

   </script>

<div id="banner1" style="width:300px; height:250px;">

   <script type="text/javascript">

   googletag.cmd.push(function () { googletag.display('banner1'); });

   </script>

</div>

after that, I darg this component to my page. It shows google ad. But I get a lot of js error.

I start to track and debug this. Finally I find this root cause is google code create a iframe to display their ad.

But AEM generated a page.js. There is a receiveMessage function to listen window.postMessage event. And it intercepts and want to convert these data to JSON.

But some part of google's data isn't JSON format. It failed.

I tried to replace or hack this function, but it cause granite component cannot drag and cannot edit.

I found AEM created its own iframe to manage components in editor model.

These is all I known as now. It seems AEM doesn't support GPT code.

[susheel]

May be you can do a try catch. To ignore the errors, when there is bad json.

var data = {};
try {
    data = JSON.parse(event.data);
} catch (e) {
    //Oh well, but whatever...
}

[smacdonald2008]

Did you read somewhere this Tag library was supported?

[susheel]

No I didn't. I just provided it based on the error.

[smacdonald2008]

I am not sure this TAG library is supported within AEM. I will check and post back.

[starkc18095558]

Waiting for your good news.

[starkc18095558]

I haven't found page.js and I don't know when AEM will generate it then inject it.