Google 広告のランディングページに AMP を使用する

一般に読み込みの速いランディングページでは、より多くのコンバージョンを獲得できます。AMP は、Google 広告のランディングページの読み込みを高速化できる優れたテクノロジーです。AMP プロジェクトでは、魅力的で高機能なページを作成するために必要なリソースがウェブデベロッパーに提供されています。このガイドでは、AMP ページで Google 広告などの広告テクノロジーを使用する方法について説明します。

AMP ページの作成と検証

基本的な AMP ページの作成方法については、AMP プロジェクトのチュートリアル、初めての AMP ページを作成するをご覧ください。

実践的で詳細な手順を知りたい方は、HTML を AMP に変換すると高度な AMP 機能を追加するのチュートリアルをご覧ください。サンプルコードと AMP コンポーネントのテンプレートは、AMP の例および AMP の開始で入手できます。

開発時には、AMP ページが有効かどうかを確認する必要があります。AMP では、ドキュメントを検証するためのさまざまなツールをご利用いただけます。最も一般的なのは、ウェブ検証ツールか Google ウェブマスターツールのテストを使用する方法です。この他、Chrome ブラウザのプラグインやデベロッパーコンソールを使用する方法、あるいはビルドに amphtml-validator npm モジュールを統合する方法もあります。

AMP テストのサポートについては、AMP プロジェクトのサポートの利用に関するページをご覧ください。

AMP でよく使われるランディングページの機能

AMP は当初は静的コンテンツ用に開発されたものでしたが、徐々に機能が拡大され、現在では動的なユースケースにも対応しています。下のリストに示されているコンポーネントを使用すると、AMP ページに動的な機能を追加できます。

amp-bind: JavaScript に似たイベントを使用して、ステートフルでインタラクティブな独自の機能を追加します。
amp-form: ユーザーに入力を求めるランディングページを作成します。
amp-carousel: 標準的なコントロールを備えたカルーセルを作成します。画像ギャラリーのスクロールに使用できます。
amp-lightbox: ユーザーが操作したコンポーネント（画像など）を全画面で表示します。
amp-live-list: コンテンツのライブストリームをランディングページに表示します。
amp-call-tracking: ハイパーリンク内の電話番号を動的に置き換えて、通話トラッキングを有効にします。
amp-mustache: Mustache.js のレンダリングを可能にします。

AMP が適さないケース

AMP ページは通常のウェブページと同じように使用することができますが、AMP の使用が適さないユースケースもあります。たとえば、次のようなケースです。

顧客の設定や地域に基づくきめ細やかなローカライズを、ドキュメントの大きなセクションでランタイムに実行するケース。国単位でドキュメントをカスタマイズする場合は、amp-geo コンポーネントを使用できます。詳細なディメンションに基づいてドキュメントをカスタマイズする場合は amp-list コンポーネントを使用できますが、コンテンツをサーバーから取得しなければならないため、遅延が発生します。
JavaScript を使用して第三者によるテストまたは A/B テストを実施するケース。amp-experiment コンポーネントを使用すると、さまざまなバリエーションを定義して、ページ単位でユーザーエクスペリエンスをカスタマイズできますが、サーバーサイドでテストを制御することはできません。

AMP プロジェクトでは、日々新しい機能やコンポーネントが追加されています。まだ追加されていない機能があれば、コードを貢献するか、GitHub で問題を投稿して追加をリクエストできます。

Google 広告の機能を利用する AMP ランディングページの設定

推奨されているランディングページのナビゲーション

通常 AMP はランディングページとその後ユーザーに表示される後続のページで効果的に機能します。ただし、清算などの複雑なフローがある場合は、非 AMP ランディングページを使用しなければならない場合もあります。AMP ランディングページでコンバージョンを測定したり、リマーケティングピクセルを配置したりする場合には、amp-analytics に組み込まれている Google 広告対応のコンバージョントラッキングコンポーネントを使用できます（詳しくは、下記参照）。

コンバージョントラッキングとリマーケティング

コンバージョントラッキングとリマーケティングのタグは通常、HTML と JavaScript のスニペットとして提供されます。しかし、AMP では JavaScript を「そのままの状態」で含めることができないため、type=googleadwords を指定した amp-analytics コンポーネントを使用してこれらのタグを実装します。Google 広告対応の amp-analytics コンポーネントには、"googleadwords"."conversion" と "googleadwords"."remarketing" の属性セットに対するサポートが組み込まれています。

amp-analytics コンポーネントを使用するには、まずページのヘッダーに必要なスクリプトを含めてから、amp-analytics でトラッキングする Google 広告のコンバージョンを設定します。

Google 広告のコンバージョントラッキングの例

Google 広告のコンバージョントラッキングを実装するには、まず Google 広告の管理画面で、または Google Ads API を使用して、ウェブサイトコンバージョンを作成します。次に、生成されたタグからいくつかのフィールドを抜き出して、対応する amp-analytics 設定の変数にマッピングします。変数名には、以下のような対応関係があります。

AMP アナリティクスの変数	コンバージョン変数
googleConversionId	google_conversion_id
googleConversionLanguage	google_conversion_language
googleConversionFormat	google_conversion_format
googleConversionLabel	google_conversion_label
googleRemarketingOnly	google_remarketing_only

これらのフィールドは、amp-analytics コンポーネントのスクリプトの vars セクションで設定します。

<amp-analytics type="googleadwords">
  <script type="application/json">
  {
    "triggers": {
      "onVisible": {
        "on": "visible",
        "request": "conversion"
      }
    },
    "vars": {
      "googleConversionId": "000000000",
      "googleConversionLanguage": "en",
      "googleConversionFormat": "3",
      "googleConversionLabel": "sampleLabel",
      "googleRemarketingOnly": "false"
    }
  }
  </script>
</amp-analytics>

この例では、amp-analytics コンポーネントは「ページの表示」イベントによって呼び出されます。ボタンクリックなどの他のイベントによってコンバージョンが発生するように設定することもできます。上記のコンバージョントラッキングの例では、remarketing-only フラグが false に設定されている点に注意してください。

Google 広告のリマーケティングの例

Google 広告では、特定のコンバージョンタグを使用して、リマーケティングを行うこともできます。詳しくは、Google 広告ヘルプセンターのリマーケティングについてをご覧ください。上記のコンバージョントラッキングの例と同様に、いくつかの変数を Google 広告のリマーケティングタグから amp-analytics タグにマッピングする必要があります。

<amp-analytics type="googleadwords">
  <script type="application/json">
  {
    "triggers": {
      "onVisible": {
        "on": "visible",
        "request": "remarketing"
      }
    },
    "vars": {
      "googleConversionId": "000000000",
      "googleRemarketingOnly": "true"
    }
  }
  </script>
</amp-analytics>

この例では、Google のコンバージョン ID と remarketing-only フラグのみを設定しています。remarketing-only フラグは true に設定します。

Google 広告の通話トラッキング

AMP ページでは通話トラッキングがサポートされているため、Google 広告の通話コンバージョントラッキングを有効にすることができます。通話トラッキングを始めるには、ガイドの手順に沿って Google 広告アカウントで電話番号表示オプションを設定します。通話コンバージョンを作成したら、生成されたコードから AMP タグで使用する設定パラメータをいくつか抽出します。この手順を実施するには、Google 広告リニューアル版から Google タグマネージャーを使用するか、Google 広告従来版の通話トラッキングスニペットを使用します。

Google タグマネージャーを使用する場合

Google タグマネージャーのコンバージョンフィールドを使用する場合は、Google 広告アカウントにログインし、コンバージョン測定のアカウント設定に移動します。次に、以下の手順で操作します。

[+] をクリックして新しいコンバージョントラッカーを追加し、[電話件数] オプションを選択します。
ダイアログで [モバイルサイトに掲載した電話番号のクリック] を選択し、[続行] を選択します。
すべての関連フィールドを含むコンバージョンを設定してから、タグを作成します。
[Google タグマネージャーを使用する] を選択して、設定を確認します。
提供されるコンバージョン ID とコンバージョンラベルを使用して、下記のように AMP 通話トラッカーを設定します。

コードスニペットを使用する場合

通話スニペットの変数	AMP 通話トラッキングでは以下に該当
`ak`	コンバージョン ID
`cl`	コンバージョンラベル

この例では、ak と cl の値はそれぞれ 123456789 と _ABcDEFg12hI34567jK になります。

<script type="text/javascript">
(function(a,e,c,f,g,b,d){var h={ak:"123456789",cl:"_ABcDEFg12hI34567jK"};a[c]=a[c]||function(){(a[c].q=a[c].q||[]).push(arguments)};a[f]||(a[f]=h.ak);b=e.createElement(g);b.async=1;b.src="//www.gstatic.com/wcm/loader.js";d=e.getElementsByTagName(g)[0];d.parentNode.insertBefore(b,d);a._googWcmGet=function(b,d,e){a[c](2,b,h,d,null,new Date,e)}})(window,document,"_googWcmImpl","_googWcmAk","script");
</script>

AMP 通話トラッカーを設定する

上記で取得した値は、AMP 通話トラッキングの設定 URL で使用します。他の AMP モジュールと同様に、まずはページのヘッダーに AMP 通話トラッキングモジュールを追加する必要があります。

<head>
<script async custom-element="amp-call-tracking" src="https://cdn.ampproject.org/v0/amp-call-tracking-0.1.js"></script>
</head>

通話コンバージョントラッキングを有効にするには、Click-to-Call リンクに Google 広告の通話トラッキング設定へのリンクを含める必要があります。

<amp-call-tracking config="https://www.googleadservices.com/pagead/conversion/7777777777/wcm?cl=AAAAAAAAAAAAA&tel=1800-123-4567&mode=1" >
  <a href="tel:18001234567">+1-800-123-4567</a>
</amp-call-tracking>

この例を実際に使用する場合は、Conversion ID の値（この例では 7777777777）と Conversion Label の値（この例では AAAAAAAAAAAAA）を置き換える必要があります。Google 広告のコンバージョンの設定時に生成されるコンバージョントラッキングコードからコンバージョン ID とコンバージョンラベルを抽出して、該当する値と置き換えてください。tel URL パラメータは、格納されているリンクの電話番号と一致する必要があります。

Google 検索のオーガニック検索と有料検索の結果に表示される AMP ページ

Google 検索では、AMP ページはページからのリンクを介して自動検出されますが、広告主は Google 広告に AMP ページの URL を明示的に入力する必要があります。どちらの検索の場合も、Google はできる限り Google AMP キャッシュからページを配信しようとしますが、ごくまれに配信元サーバーからの配信にフォールバックすることがあります。

Google AMP キャッシュから配信される AMP ページが Google 検索ビューアにどのように表示されるか確認するには、構造化データテストツールに AMP の記事を入力して、[プレビューリンク] をクリックしてください。

また、Google 広告のトラフィックを AMP ランディングページに誘導したいが、オーガニック検索の結果に表示したくないという場合は、通常のウェブページと同様に、該当する AMP ページの robot.txt に Disallow ディレクティブを追加してください。

Google 広告に関連する主なテクノロジーの統合

amp-analytics でユーザーアクションとイベントをトラッキングする

amp-analytics コンポーネントを使用して、ユーザーアクションやイベントをトラッキングできます。AMP アナリティクスは、40 社を超えるアナリティクスベンダーによってネイティブサポートされています。AMP アナリティクスのフレームワークは柔軟性に優れているため、カスタム設定を使用して URL を測定およびトリガーし、自社のサーバーや AMP のネイティブサポートが利用できないベンダーに分析情報を送信することができます。ご使用のテクノロジーがサポートされていない場合は、サポートを追加するようベンダーにご依頼ください。

AMP アナリティクスでは、柔軟性の高い変数置換も可能です。詳しくは、変数置換に関するドキュメントをご覧ください。

Google アナリティクス

Google アナリティクスは、amp-analytics でサポートされています。Google 広告のトラフィックをトラッキングする方法について詳しくは、Google アナリティクスの設定に関するおすすめの方法をご覧ください。

すでに Google アナリティクスをご利用の場合は、ページ上のタグの更新が必要となることがあります。Google アナリティクスのレポートが AMP と正しく連携するようにするには、Google アナリティクスのドキュメントをご覧ください。

Google タグマネージャー

amp-analytics コンポーネントには、Google タグマネージャーのサポートも組み込まれています。

Adobe Analytics（旧称 Omniture）

Adobe Analytics では、AMP にウェブサイトパフォーマンストラッキングソリューションを実装する方法が 2 つ提供されています。1 つは iframe 方式（「adobeanalytics_nativeConfig」）、もう 1 つは非 iframe 方式（「adobeanalytics」）です。
非 iframe 方式では、元のドメインと AMP キャッシュのドメインの両方にまたがるセッションデータを適切にキャプチャできないため、新しい AMP ページでは必ず iframe 方式（adobeanalytics_nativeConfig）を使用してください。非 iframe 方式では、訪問数や訪問者数が実際より多くカウントされる場合があります。また、最新の Adobe Marketing Cloud の統合にも対応していません。
- iframe 方式を使用する場合は、AMP ページ内で Adobe Analytics を実装する方法について、こちらの AMP の記事をご覧ください。
- 非 iframe 方式から iframe 方式に移行するため、実装に変更を加える必要がある場合は、こちらの AMP の記事をご覧ください。
  
  注: 実装の方式を切り替えても、履歴データにはこれまでどおりアクセスできます。ただし、非 iframe 方式から iframe 方式に移行すると、実際より多くカウントされていた訪問者数が減少するため、収集データに多少の差異が生じる可能性があります。
さらに Safari ブラウザでは、iframe 方式を使用していても、ブラウザの制限により異常が発生する場合があります。このような異常が見られるのは、元のドメインに一度もアクセスしていないユーザーが Safari を使用して初めて AMP ページにアクセスし、その後で通常の（非 AMP）サイトにアクセスする場合です。この場合、AMP とメインサイトが同じレポートスイートに含まれていれば、Analytics では訪問者は 2 人とカウントされます。ただし、訪問者が AMP にアクセスする前に publisher.com のメインサイトにアクセスしていれば、レポートでは 1 人の訪問者としてカウントされます。

キャッシュ配信のサポート

現時点でキャッシュからの配信を利用できるのは、Android 向けの Chrome で Google 検索結果ページに掲載されるテキスト広告（動的検索広告を除く）のみですが、キャッシュ配信の対象範囲は、今後数か月でさらに拡大する予定です。また、現在キャッシュ配信を利用できる広告は、クリックトラッキングテクノロジーを使ってクリックをリダイレクトしない広告に限られていますが、Google では、今後数か月のうちにすべてのクリックトラッキングテクノロジーのプロバイダに対応できるようにしたいと考えております。

サポートされていないウェブサイトの通話コンバージョントラッキング

現時点では、ウェブサイトからの電話問い合わせに対して通話コンバージョントラッキングを設定しても、コンバージョンは報告されません。

無効な AMP ページに対する処理

ウェブサーバーの AMP ページが無効になっても、Google AMP キャッシュは引き続きページの旧バージョンをホストします。旧バージョンとは、ウェブサーバーで AMP ページが無効になる前の最後の有効なバージョンです。キャッシュされている旧バージョンのページは 1～2 日間ユーザーに配信されますが、それ以降のクリックはウェブサーバー上の無効な AMP ページに転送されます。

ランディングページの AMP コンテンツを更新する

頻繁に更新されるコンテンツ（商品の価格など）が AMP ページに含まれている場合、Google AMP キャッシュに最新の変更を反映させる方法については、update-cache または update-ping リクエストオプションに関する記事をご覧ください。

Google 広告のランディング ページに AMP を使用する

AMP ページの作成と検証

AMP でよく使われるランディング ページの機能

AMP が適さないケース

Google 広告の機能を利用する AMP ランディング ページの設定

推奨されているランディング ページのナビゲーション

コンバージョン トラッキングとリマーケティング

Google 広告のコンバージョン トラッキングの例