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 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 広告のリマーケティング タグから 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 に設定します。

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

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

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

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

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

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

この例では、akcl の値はそれぞれ 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 の記事をご覧ください。

  • さらに 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 リクエスト オプションに関する記事をご覧ください。