Blog Settings

Ghost CMSで広告を管理｜AMP自動広告を設定する

World Administrator
2023年8月23日
8 分で読めます
Ghost CMS, Tech For You
Photo by Selwyn van Haaren / Unsplash

目次

本稿では、個人情報保護の観点からsrc=#と表記しますが、実際の環境では各自が読み替えてください。

AdSenseからAMP自動広告コードを取得する

AMP自動広告を挿入するためのコードを取得してください。

AMP サイトに自動広告を設定する - Google AdSense ヘルプ
AMP 自動広告を使うと、AMP ページに AdSense 自動広告が自動的に配信されるようになります。AMP 自動スクリプトと広告コードを追
Google AdSense ヘルプ

amp.hbsを見つける・作成する

テーマをダウンロードしたら、テーマのファイルにamp.hbsがあるか探します。多くのテーマではこのファイルは見つからないと思います。

以下に書いてあるように、Ghostのテンプレートをカスタマイズをすることが可能ですので、自分でamp.hbsを作成することが可能です。

Customise the template with your own styles

AMP in Ghost can be styled to suit your brand and theme too! Since the Ghost theme layer is entirely customisable, that means you can also customise the way your AMP pages are rendered by including a custom amp.hbs template file in your theme.

To access any post rendered using the amp.hbs template on your site, add /amp/ to the end of any post URL on your publication. The parent post also has a canonical link to it’s AMP equivalent.

Official Ghost + Google AMP Integration
Ghost has a default Google AMP integration built-in, which can be customised to suit your needs. If you prefer not to use AMP, you can also turn it off! ⚡
Ghost - The Professional Publishing Platform

本稿ではGitHubのページからデフォルトのamp.hbsを利用することにします。

Ghost/ghost/core/core/frontend/apps/amp/lib/views/amp.hbs at 3d989eba2371235d41468f7699a08e46fc2b1e87 · TryGhost/Ghost
Turn your audience into a business. Publishing, memberships, subscriptions and newsletters. - TryGhost/Ghost
GitHubTryGhost

ドキュメントから引用すると、テンプレートの構造は次のとおりです。

.
├── /assets
|   └── /css
|       ├── screen.css
|   ├── /fonts
|   ├── /images
|   ├── /js
├── default.hbs
├── index.hbs [required]
└── post.hbs [required]
└── amp.hbs [optional]
└── package.json [required]

amp.hbsファイルを編集し、AMP自動広告コードを挿入する

Google AdSenseでは以下のように導入の解説がされています。

ステップ 1: スクリプトをコピーして、サイトの タグの間に貼り付けます

AMP サイトの HTML の head タグの間に、このコードを一度配置してください。このスクリプトによって、関連する amp-auto-ads ライブラリが読み込まれます。

では、説明された通りに導入しましょう。広告を読み込むコードは<head>...</head>の中では一番遅くていい処理だと思います。そのため、私は</head>の直前に書き込みます。

ステップ 2: AMP 自動広告コードをコピーして、ページの タグのすぐ後に貼り付けます。

このコードをコピーして、広告を表示するページの タグのすぐ後に貼り付けます。なお、コードを貼り付けた場所に広告が表示されるわけではありません

私が利用しているデフォルトのamp.hbsでは<head>...</head>の直後に<body>...</body>と続きます。つまり、</head>の前後にコードを記述すればいいだけです。

では、コードを実際に書いていきましょう。

大丈夫です。コピーペーストをするだけなので簡単です。

以下は編集前のコードです。

...
    </style>

    {{!-- AMP Boilerplate --}}
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    {{amp_components}}

</head>
<body class="amp-template">
    {{#post}}
    <header class="page-header">
...

以下は編集後のコードです（これがコードの完成形です）。

次の章で示します。

完成形

...
    </style>

    {{!-- AMP Boilerplate --}}
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    {{amp_components}}

</head>
  {{#unless @member.paid}}
    {{!-- Free member, or not logged in (not a member) --}}
      <script async custom-element="amp-auto-ads"
        src="#">
      </script>
  {{/unless}}
<body class="amp-template">
    {{#unless @member.paid}}
    {{!-- Free member, or not logged in (not a member) --}}
        <amp-auto-ads type="adsense"
            data-ad-client="#"">
        </amp-auto-ads>
    {{/unless}}
    {{#post}}
    <header class="page-header">
...

変更点の確認

Step 1では以下のようなコードを取得できます。

<script async custom-element="amp-auto-ads"
        src="#">
</script>

このコードを書き込んだものはこのようになります。

...
    </style>

    {{!-- AMP Boilerplate --}}
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    {{amp_components}}

</head>
  {{#unless @member.paid}}
    {{!-- Free member, or not logged in (not a member) --}}
      <script async custom-element="amp-auto-ads"
        src="#">
      </script>
  {{/unless}}
<body class="amp-template">
    {{#post}}
    <header class="page-header">
...

Step 2では以下のようなコードを取得できます。

<amp-auto-ads type="adsense"
        data-ad-client="#">
</amp-auto-ads>

Step 2で取得したコードも書き込んだ最終的なコードは次のようになります。

これは完成形のコードと完全に一致します。

...
    </style>

    {{!-- AMP Boilerplate --}}
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    {{amp_components}}

</head>
  {{#unless @member.paid}}
    {{!-- Free member, or not logged in (not a member) --}}
      <script async custom-element="amp-auto-ads"
        src="#">
      </script>
  {{/unless}}
<body class="amp-template">
    {{#unless @member.paid}}
    {{!-- Free member, or not logged in (not a member) --}}
        <amp-auto-ads type="adsense"
            data-ad-client="#"">
        </amp-auto-ads>
    {{/unless}}
    {{#post}}
    <header class="page-header">
...

有料会員には広告を表示しない

これは、今まで提示してきた完成版のコードと全く同じです。

確認のために再掲しています。

...
    </style>

    {{!-- AMP Boilerplate --}}
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    {{amp_components}}

</head>
  {{#unless @member.paid}}
    {{!-- Free member, or not logged in (not a member) --}}
      <script async custom-element="amp-auto-ads"
        src="#">
      </script>
  {{/unless}}
<body class="amp-template">
    {{#unless @member.paid}}
    {{!-- Free member, or not logged in (not a member) --}}
        <amp-auto-ads type="adsense"
            data-ad-client="#"">
        </amp-auto-ads>
    {{/unless}}
    {{#post}}
    <header class="page-header">
...

会員には（つまり、無料会員と有料会員のどちらも）広告を表示しない

簡潔に言えば、{{#unless @member.paid}}を使わないで、代わりに{{/unless @member}}を利用するだけです。

...
    </style>

    {{!-- AMP Boilerplate --}}
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    {{amp_components}}

</head>
  {{#unless @member}}
    {{!-- Free member, or not logged in (not a member) --}}
      <script async custom-element="amp-auto-ads"
        src="#">
      </script>
  {{/unless}}
<body class="amp-template">
    {{#unless @member}}
    {{!-- Free member, or not logged in (not a member) --}}
        <amp-auto-ads type="adsense"
            data-ad-client="#"">
        </amp-auto-ads>
    {{/unless}}
    {{#post}}
    <header class="page-header">
...

テーマをzip圧縮する

amp.hbsの編集ができましたら、テーマフォルダーをzip圧縮します。

テーマをアップロードする

あなたのGhost Adminサイトにログインし、Settings、Design、Change Themeへと移動します。Upload Themeをクリックし、あなたが先ほどのセクションで作ったzipファイルをアップロードします。

確認

サイトが正常に機能しているか確認してください。

以上で完成です。