Joomlaでアドセンスを貼っていた方法

8月 23, 20178月 25, 2017

≪≪この記事をすべて読むには約 6 分かかります≫≫

JoomlaはWordpressに次ぐ地位にあるCMSです。私は気に入って使っていますがWordpressと比べると基本機能では負けていないものの、やはり拡張機能の数とバリエーションで劣っています。拡張機能を自分で作ってみようと試したこともありますが、当時は断念してしまいました。

Joomlaにも新しいアドセンス用の拡張機能が公開されているので新しく作るときには自分でコードを書き込むこともないかもしれませんが、稼働しているサイトをいじるのを機に次回のために備忘録で残しておきます。

見出し一覧

1. Adsenseのコード
2. JoomlaでのAdsense広告

Adsenseのコード

通常の非同期コードは、3つのパーツから成っています。

HTMLヘッダ

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-****************",
enable_page_level_ads: true
});
</script>

まず<head></head>セクション内でAdsenseコードの初期化を行います。

広告挿入部位

<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-****************"
data-ad-slot="*********"
data-ad-format="auto"></ins>

広告挿入部位に広告の情報を書き込みます。

読み込み

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

広告の配信スクリプトを読み込んで広告を表示させます。

JoomlaでのAdsense広告

Joomlaにも、いくつかAdsense広告配信用の拡張機能がありますが、表示方法のカスタマイズをしたくなったのでモジュールを使ってモジュール内にコードを書き込むという形にしていました。

EasyScript

HTMLヘッダでJavascriptやCSSの読み込み、カスタムコードの実行をしてくれるプラグインです。

ほぼ同名のEasy Scriptがありますが別物なので、Blackdale.comのBob Galway作のほうです。

ここでヘッダ部分の初期化コードを入れました。一緒に、Bing用の認証コードやフィードの情報も書いていました。

EasyScriptはコンポーネントがなくプラグインだけなので、エクステンション→プラグイン管理から探さないと編集できません。これをいつも忘れてしまい、どこで設定したのかわからなくなるのが数か月に一度起こります・・・。この辺りはWordpressの「拡張機能＝プラグイン」がシンプルでわかりやすいです。

モジュール化して表示

広告表示コードをモジュール化し、レスポンシブデザインの中で設置していきます。JoomlartのPurity IIIなどのテンプレート拡張が編集しやすく使いやすいです。

モジュールは、スクリプトをモジュールにできるプラグインを利用しても良いですが、拡張機能「NoNumber Sourcerer」を使ってHTML内に{source}{/source}で囲んだHTMLを記載して表示させていました。この状態のHTMLソースコードを見ると非常に見苦しくなっていますが気にしないようにしてはいけません。

HTMLとして表示されたときに「ソースコードが読める状態」にしておくことで「Sourcerer」が起動して記載されたコードが実行されるということを覚えておかないとハマります。あくまで、WYSIWYGエディターでソースコード風に表示される状態で{source}{/source}に囲まれることが必要です。何度もハマりました・・・

例外ページの処理

目次ページやヘルプページといった通常の記事と異なるページには、「NoNumber Modules Anywhere」を使って{loadpos}でモジュールポジションを読みこませたり、ページごとの表示位置、表示広告の管理のために隠しタグを作成し、「Advanced Module Manager」を使って条件分岐し表示させます。