How to put Google AdSense banners on Mediawiki Minerva mobile skin

From Is-beer-a-vegetable.com
Jump to: navigation, search

How to put Google AdSense banners on Mediawiki Minerva mobile skin

Showing AdSense banners on an iPhone 5

I've experimented with various different skins to come up with one that satisfied Google's 'Mobile Friendly Test' and also gave a good user experience. I used the Botstrap skin for many years on my large wiki; [https://www.cookipedia.co.uk/recipes_wiki/Welcome_to_Cookipedia Cookipedia.co.uk but I had problems with the 3 column layout on category pages when there were very long words ([https://www.cookipedia.co.uk/recipes_wiki/Category:Salad_recipes Category:Salad_recipes). Eventually I had to use the mobile skin that is used by Wikipedia. The skin is Minerva. It is automatically installed by Extension:MobileFrontend, unlike normal Mediawiki skins, it is not located in the /wiki/skins/

The Minerva skin files are installed under the MobileFrontend extension directory: /wiki/extensions/MobileFrontend/includes/skins/ These files are:

  • UserLoginMobileTemplate.php
  • UserLoginAndCreateTemplate.php
  • UserAccountCreateMobileTemplate.php
  • SkinMinerva.php
  • SkinMinervaBeta.php
  • SkinMinervaApp.php
  • SkinMinervaAlpha.php
  • MinervaTemplateBeta.php
  • MinervaTemplateAlpha.php
  • MinervaTemplate.php

Where to add the banner script code to the php files on the Minerva skin

AdSense adverts that are placed within content pages will still show regardless of skin, however to get banners above the header and below the footer of a page (top and bottom), you will need to modify the Minerva skin directly. The file that needs to be modified is MinervaTemplateBeta.php.

The instructions are for the current version (no version number shown via Special:Version or from perusing the code.

The file you need to modify to include banner advertising on mobile devices is MinervaTemplate.php. You can see from the files listed above, there are other templates for other functions and apps, adding banners to those is left as an exercise for the reader.

For the header banner (around line number 338):

                           <?php
                        echo $data['secondaryButton'];
                    ?>
                </div>
<!--INSERTED_BANNER_CODE--><div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- banner name -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-nnnnnnnnnnnnnnnn"
data-ad-slot="nnnnnnnnnn"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!--/inserted_banner_code--></div>
                <div id="content_wrapper">

and for the footer, just a few lines below (around line number 355) with header banner added:

                    $this->renderContentWrapper( $data );
                ?>
                </div>
<!--INSERTED_BANNER_CODE--><div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- banner name -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-nnnnnnnnnnnnnnnn"
data-ad-slot="nnnnnnnnnn"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!--/inserted_banner_code--></div>
                <?php
                    $this->renderFooter( $data );
                ?>

Poor mobile detect function

Be aware that the function $wgMFAutodetectMobileView is rather poorly implemented. I had users complaining that they could not find pages. The skin Minerva has pretty crippled navigation and no way that I have found to include Mediawiki:Sidebar, limiting navigation opportunities for visitors.

$wgMFAutodetectMobileView seems to class iPads as a mobile device, which seems rather odd. You can use Extension:MobileDetect to correctly switch skins but you will need to set $wgMFAutodetectMobileView = 'false'; and only set it to 'true' within a MobileDetect clause.


I hope this proves useful to someone wanting to add banners to the Mantle mobile skin on a MediaWiki.