django-ads を使って、Blog に Google AdSense の広告を表示できなかった

Blog の Template 内に Goolge AsSense の広告を幾つか設定しています。
include 化して共通化はしているものの、何かライブラリ使ったほうが良さそうには感じていて少し探したところ、razisayyed/django-ads: Ads Management System for Django Framework を見つけました。
README.md を見る限り、いい感じに思えましたので、インストールして設定してみました。
結論から言うと、sekizai の使い方がよくわからず、広告が表示されませんでしたが、何かの役に立つかもしれませんので、経過を記載します。

[TOC]

前提

以下の環境でインストール、設定は行っています。

OS
CentOS release 6.9 (Final)
Python Version
Python 2.7.8
Package (必要そうなものだけ抜粋)
Django (1.10.7) Mezzanine (4.2.3)

インストール

インストール、及び設定を行います。

pip 実行

pip install django-ads
----------------------------------
Successfully built django-ads
Installing collected packages: django-classy-tags, django-sekizai, django-ads
Successfully installed django-ads-0.1.8 django-classy-tags-0.8.0 django-sekizai-0.10.0
----------------------------------

django-classy-tags、django-sekizai というライブラリが一緒にインストールされました。
あまり知らないライブラリですが、どちらも tempalte 関連の Utility Library のようです。

settings.py にアプリケーションを追加
アプリケーション ads を追加します。
```
INSTALLED_APPS = (
    .....
    "ads",
    )
```

Migration を実行
Migration コマンドを実行します。

python2.7 manage.py migrate ads
---------------------------------
Operations to perform:
  Apply all migrations: ads
Running migrations:
  Applying ads.0001_initial... OK
  Applying ads.0002_adimage... OK
  Applying ads.0003_auto_20170207_1034... OK
  Applying ads.0004_remove_ad_image... OK
---------------------------------

どんなテーブルができたのか確認します。

python2.7 manage.py dbshell
--------------------------------------------------------------------------
\d
 スキーマ |                名前                 |     型     |   所有者   
----------+-------------------------------------+------------+------------
 public   | ads_ad                              | テーブル   | xxxxxxxxx
 public   | ads_ad_id_seq                       | シーケンス | xxxxxxxxx
 public   | ads_adimage                         | テーブル   | xxxxxxxxx
 public   | ads_adimage_id_seq                  | シーケンス | xxxxxxxxx
 public   | ads_advertiser                      | テーブル   | xxxxxxxxx
 public   | ads_advertiser_id_seq               | シーケンス | xxxxxxxxx
 public   | ads_category                        | テーブル   | xxxxxxxxx
 public   | ads_category_id_seq                 | シーケンス | xxxxxxxxx
 public   | ads_click                           | テーブル   | xxxxxxxxx
 public   | ads_click_id_seq                    | シーケンス | xxxxxxxxx
 public   | ads_impression                      | テーブル   | xxxxxxxxx
 public   | ads_impression_id_seq               | シーケンス | xxxxxxxxx

予想外に管理系のテーブルができています。

settings.py の TEMPLATES の context_processors を編集する
私の settings.py には既にいたので追加していませんが、なければ context_processors に django.template.context_processors.request を追加します。

        'OPTIONS': {
            'context_processors': [
                ...
                'django.template.context_processors.request',
                ...
            ],

settings.py の MIDDLEWARE を編集する
これも settings.py には既にいましたが、なければ MIDDLEWARE に django.contrib.sessions.middleware.SessionMiddleware を追加します。
```
MIDDLEWARE = [
    ...
    'django.contrib.sessions.middleware.SessionMiddleware',
    ...
]
```

広告の設定

この Blog には 2種類広告が存在します。種類は以下の通りです。

Blog 記事の上下に表示する広告
AMP ページの画面下部に表示する広告

razisayyed/django-ads: Ads Management System for Django Framework は AMP の amp-sticky-ad タグには対応していないようです。一旦 Blog 記事の上下に表示する広告を django-ads に置き換えます。

Blog に設定していた広告タグ
以下のようなタグを設定していました。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

settings.py を編集
上記の広告タグは、settings.py 上で以下のように記載できます。

ADS_GOOGLE_ADSENSE_CLIENT = 'ca-pub-xxxxxxxxxxxxxxxx'  # OPTIONAL - DEFAULT TO None

ADS_ZONES = {
    'blog_ads_top_and_bottom': {
        'name': _('Top And Bottom'),
        'google_adsense_slot': 'xxxxxxxxx',  # OPTIONAL - DEFAULT TO None
        'google_adsense_format': 'auto',  # OPTIONAL - DEFAULT TO None
    },
}

sekizai_tags の load
django-ads/render_ads_zone.html at master · razisayyed/django-ads の実装は以下のようになっています。

{% load sekizai_tags %}{% spaceless %}
{% if ad %}
{% for image in ad.images.all %}
<a href="{% url 'ads:ad-click' ad.id %}" target="_blank" rel="nofollow" title="{{ ad.title }}" class="django-ads-ad visible-{{ image.device }}">
    <img src="{{ image.image.url }}" class="img-responsive" />
</a>
{% endfor %}
{% elif google_adsense_client and zone.google_adsense_slot %}
    {% addtoblock "js" %}<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>{% endaddtoblock %}
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="{{ google_adsense_client }}"
         data-ad-slot="{{ zone.google_adsense_slot }}"
         data-ad-format="{{ zone.google_adsense_format|default:'auto' }}"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
{% endif %}
{% endspaceless %}

sekizai の addtoblock タグで js ブログに ads の JavaScript が差し込まれる作りになっているので、` 規定テンプレートに、<wbr>差し込み<wbr>箇所となる<wbr>` を追加します。

<head>
{% load sekizai_tags %}
{% render_block "js" %}
</head>

タグが差し込まれない

上記の設定をした後に画面表示を行いましたが、以下のタグが差し込まれず、広告が表示できませんでした。

{% addtoblock "js" %}<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>{% endaddtoblock %}

最終的に、以下の形でスクリプトを出力するようにして対処しました。¹

{% autoescape off %}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
{% endautoescape %}

最終的な導入する/ しない

sekizai タグで記述できると結構いい感じに書けますが、動作させることができなかったため、元の実装に戻しました。

以上です。

autoescape を off にしないと出力されませんでした。原因はこれな気もします。 ↩

カテゴリー

Django

django-ads を使って、Blog に Google AdSense の広告を表示できなかった

前提

インストール

広告の設定

タグが差し込まれない

最終的な導入する/ しない

コメント

カテゴリー

最近の投稿

前提

インストール

広告の設定

タグが差し込まれない

最終的な導入する/ しない

コメント

カテゴリー

関連投稿

最近の投稿