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


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


前提

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

  • 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-tagsdjango-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 が差し込まれる作りになっているので、` 規定テンプレートに、差し込み箇所となる` を追加します。
    <head>
    {% load sekizai_tags %}
    {% render_block "js" %}
    </head>
    


タグが差し込まれない

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

{% addtoblock "js" %}<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>{% endaddtoblock %}
最終的に、以下の形でスクリプトを出力するようにして対処しました。1
{% autoescape off %}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
{% endautoescape %} 


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

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

以上です。


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

コメント