미디어위키에서 구글 애드센스 연동하기

미디어위키에서 구글 애드센스 연동하기

미디어위키에 광고를 보여주는 코드를 삽입하는 방법을 알려주는 글입니다. 스킨에 광고를 삽입하는 방법 대신에 hooks를 이용합니다. 이 방법은 2가지 장점이 있습니다.

• 개별적으로 각각의 스킨을 수정할 필요가 없습니다. 이것은 사용자가 스킨을 변경하더라도 광고를 동일한 장소에 디스플레이 될것입니다.
• 업그레이드 작업이 간단합니다. Hooks는 스킨과는 달리, 미디어 위키의 버전 업그레이드에 의해 수정되지 않은 LocalSettings.php에 있습니다.

아래의 예는 각 페이지의 머리글, 바닥글 및 사이드 바에 광고를 삽입하는 방법을 보여줍니다. 구글 애드 센스 광고 서비스 코드를 사용했지만, 그것은 쉽게 다른 광고 네트워크의 광고 서비스 코드에 의해 대체 될 수 있습니다.

머리글

We use the SiteNoticeAfter hook to place our ad code directly below the site-notice and above the article header. 사이트 공지사항 밑이나 문서 헤더 위의 광고 코드를 배치할 SiteNoticeAfter hook를 사용합니다.

The following snippet should be added to your LocalSettings.php. You should modify the ad-code between the EOT lines to match yours. A 728x90px leader board fits well and usually has large number of available ads in AdSense. 다음 코드를 LocalSettings.php에 추가합니다. 당신은 당신이 받은 광고코드와 일치하도록 EOT 라인 사이의 광고 코드를 수정해야합니다.일반적으로 728x90px 리더 보드를 사용하시면 됩니다.

$wgHooks['SiteNoticeAfter'][] = function(&$siteNotice, $skin) {
        $siteNotice .= <<< EOT
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
        return true;
};

Footer

The SkinAfterContent hook. allows us to display a banner right after the article content.

Most horizontal ads would fit nicely for this location. As before, the ad code goes between the EOT lines. This time, however, we need to wrap it in a

to center-align the ad.

$wgHooks['SkinAfterContent'][] = function(&$data, $skin) {
        global $myAdCode;
        $data .= '<div style="text-align:center;">';
        $data .= <<< EOT
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
 
        $data .= '</div>';
        return true;
};

Sidebar

sidebar_ad Placing an ad in the sidebar, turns out to be a little trickier than the header and the footer. The SkinBuildSidebar allows us to insert ads between the Navigation portal and the ToolBox portal in the sidebar. However there are few caveats:

The first one, is that in the default Vector skin, the portals are collapsible. This may be a nice feature, but I’m not sure having an option to hide ads is such a good idea. Hence we add a little JavaScript snippet that makes the ad portal permanent.

Secondly, each portal in the sidebar has a title. The title of the portal containing the ads will be “Ads”. If your wiki is non-english, you’ll probably want to translate it. To do so, you simply need to create the page MediaWiki:Ads in your wiki and write the translation there.

Thirdly, the sidebar is a too narrow for 160x600px vertical skyscraper, which is the narrowest recommended vertical placement size. You could either use narrower ad size, which as Google AdSense warns have significantly less stock, or increase a bit the size of the sidebar. Increasing the size of the sidebar should be done per skin. For the default vector skin, the can be done by editing the MediaWiki:Vector.css page (creating it if necessary) and adding the following lines:

/* increase Vector sidebar width to accommodate ads */
div#mw-panel { width: 12em; }
div#footer, #mw-head-base, div#content { margin-left: 12em; }
#left-navigation { margin-left: 12em; }

If your wiki is in RTL language, you need to use a modified snippet:

/* increase Vector sidebar width to accommodate ads */
div#mw-panel { width: 12em; }
div#footer, #mw-head-base, div#content { margin-right: 12em; }
#left-navigation { margin-right: 12em; }

Below is the code that needs to be placed in LocalSettings.php. Again, you should replace the ad code between the EOT lines.

$wgHooks['SkinBuildSidebar'][] = function($skin, &$bar) {
        $out = <<< EOT
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:160px;height:600x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
        $out .= "<script>$('#p-Ads').addClass('persistent');</script>";
        $bar['Ads'] = $out;
        return true;
};

The three types of ads can be previewed in this wiki.

원문

https://www.guyrutenberg.com/2014/10/13/displaying-google-adsense-in-mediawiki/#comments