Showing Google adsense in the Hotspots menu

I've been asked recently by a customer how to add Google AdSense to the Hotspots Menu & on first look I thought that it should be as easy as pasting the adsense code in the module position that is available in the menu. However it turned out to me more complicated than that, so that's why I'm writing this blog post. 

This is the code that we have from Google AdSense:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- test -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

You are normally supposed to just paste this code where you want your ads to appear. In the case of Hotspots however this is a little more complicated. The problem is that the module positions that are available in the menu are actually a javascript template that is dynamically rendered in the menu. So any javascript that you have there won't actually be executed.

That's why we'll have to do some coding, but first create a new custom html module and assign it to the hotspots_below_list position. Add the following code into it:

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxxx"></ins>

This is where the ads are going to show. Now if you have a look at hotspots, you'll see that after the hotspots list doesn't immediatly end where the scroll is. We have some 250px more after the list. This is what the <ins tag created for us. In the code above make sure to replace the first xxx placeholder with your clien id and the second xxxx placeholder with your ad-slot.

Now comes the fun part. Adding the javascript. The easiest way to add it and ensure that it will work in the future as well is by creating a template override for the hotspots view. You'll need to copy the components/com_hotspots/views/hotspots/tmpl/default.php to templates/your_template/html/com_hotspots/hotspots/default.php

At the end of the file you should see those lines:

CompojoomHtml::script(
    CompojoomHtml::getScriptQueue('hotspots'),
    'media/com_hotspots/cache',
    HotspotsHelperSettings::get('minify', true)
);

Just after it add the following code:

?>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript">
    (function($) {
        HotspotsManager.on('hotspots:fetchedData', function() {
            try{
                (adsbygoogle = window.adsbygoogle || []).push({});
            }catch(ex){}
        });
    })(jQuery);
</script>

?> sign makes sure that we are properly closing the php code. The first script tag loads the adsbygoogle.js file. And the second script makes sure that once we fetch data from the server we init the ads. That's it! Now your ads should populate after the hotspots list.