Google Publisher Tag Conflict with AEM component | Community
Skip to main content
S
starkc18095558
July 27, 2017
Question

Google Publisher Tag Conflict with AEM component

  • July 27, 2017
  • 6 replies
  • 2129 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    6 replies

    susheel
    susheel
    Level 5
    July 27, 2017

    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
    smacdonald2008
    Level 10
    July 27, 2017

    Did you read somewhere this Tag library was supported?

    susheel
    susheel
    Level 5
    July 27, 2017

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

    smacdonald2008
    smacdonald2008
    Level 10
    July 27, 2017

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

      S
      starkc18095558Author
      July 28, 2017

      Waiting for your good news.

      S
      starkc18095558Author
      July 28, 2017

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

      Terms & ConditionsAccessibility statement

      Loading footer...