Technote Details :: I can't use Google Ads in an AJAX panel

I placed some Google Ads inside an AJAX panel. When I preview my site in browser, the ads are not displayed.

Most web browsers do not allow the loading of cross-domain JavaScript or CSS files using AJAX, because this is considered a security risk. As a consequence, Google Ads, which rely on a remote JavaScript file, will not work. Other cross-domain JavaScript files or CSS files included in AJAX panels will also be discarded (ignored) by web browsers, when requested via AJAX links.

You can still use Google Ads in your AJAX sites, if you use the following approach:

1. Create a separate file that will hold the Google Ads, say google_ads.php.
2. In this file, place the code that calls the Google Ads. It should be something similar to this (the code and parameters may vary depending on the type of ads you use):
   <script type="text/javascript"><!--
   google_ad_client = "pub-96xxxxxxxx59";
   google_ad_width = 120;
   google_ad_height = 600;
   google_ad_format = "120x600_as";
   google_ad_channel ="";
   //--></script>
   <script type="text/javascript"
     src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>
3. Inside the AJAX panel where you want to place the ads, insert an iframe that references the file created previously like this:
   <iframe src="google_ads.php" width="120" height="600"> </iframe>
4. As you may already know, Google Ads are displayed and refreshed depending on the content of your site. In other words, they are context-sensitive. If your site is built with AJAX panels (using MX AJAX Toolbox), this means content is loaded asynchronously, using AJAX, without refreshing the whole page. To make your Google Ads aware of these content changes, you need to make two changes to your google_ads.php file:
5. 1. Add a function that will retrieve the correct URL of your site, in order to index the correct content (or set the correct context for the ads). This function is:
      getDegradableCall = function() {
      var url = '';
      var L = top.location;
      url = L.protocol + "//" + L.host + L.pathname + L.search;
      if(typeof top.$ctrl != "undefined") {
      // on a master page
      var hashParams = top.location.hash.replace(/^#/, "");
      if(hashParams){
          url = top.$app_path + "?" + hashParams;
      }
      }
      return url;
      }
      
   2. Add an extra parameter to your ads, that passes the URL retrieved earlier by the function getDegradableCall:
      google_page_url = getDegradableCall ();
6. After these changes, the modified code for the google_ads.php page should be:
   

   <script type="text/javascript">
   getDegradableCall = function() {
   var url = '';
   var L = top.location;
   url = L.protocol + "//" + L.host + L.pathname + L.search;
   if(typeof top.$ctrl != "undefined") {
   // on a master page
   var hashParams = top.location.hash.replace(/^#/, "");
   if(hashParams){
       url = top.$app_path + "?" + hashParams;
   }
   }
   return url;
   }
   </script>
   <script type="text/javascript"><!--
   google_ad_client = "pub-96xxxxxxxx59";
   google_ad_width = 120;
   google_ad_height = 600;
   google_ad_format = "120x600_as";
   google_ad_channel ="";
   google_page_url = getDegradableCall ();
   //--></script>
   <script type="text/javascript"
     src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>

Now Google Ads should be displayed fine, depending on the content of your current page.