通常、読み込みが速いランディング ページでは、より多くのコンバージョンを獲得できます。AMP は、Google 広告のランディング ページの読み込みを高速化できる優れたテクノロジーです。amp.dev には、魅力的で成果の高いページを作成するのに必要なリソースがウェブ デベロッパー向けに用意されています。この手順ガイドでは、AMP ページで Google 広告などの広告テクノロジーを使用する方法について説明します。
ステップ 1: AMP ページを作成して検証する
AMP ページを作成する
基本的な AMP ページの作成方法については、AMP プロジェクトのチュートリアル、初めての AMP ページを作成するをご覧ください。実践的で詳細な手順を知りたい方は、HTML を AMP に変換すると高度な AMP 機能を追加するのチュートリアルをご覧ください。サンプルコードと AMP コンポーネントのテンプレートは、AMP ウェブサイトの例と AMP テンプレートで入手できます。
以下のリストに、AMP ページで使用されるコンポーネントの一部を示します。コンポーネントの完全なリストも参照してください。
- amp-bind: JavaScript に似たイベントを使用して、ステートフルでインタラクティブな独自の機能を追加します。
- amp-form: ユーザーに入力を求めるランディング ページを作成します。
- amp-list: CORS JSON エンドポイントからコンテンツを動的に取得します。
- amp-carousel: 画像ギャラリーのスクロールに使用する画像カルーセル。
- amp-lightbox: ユーザーが操作したコンポーネントを全画面で表示します。
- amp-call-tracking: ハイパーリンク内の電話番号を動的に置き換えて、通話トラッキングを有効にします。
- amp-mustache: Mustache.js によるレンダリングを可能にします。
- amp-date-picker: 日付を選択するためのウィジェットを提供します。日付選択ツールは、入力フィールドを基準としたオーバーレイとして、または静的なカレンダー ウィジェットとしてレンダリングできます。
AMP ページを検証する
開発時には、AMP ページが有効かどうかを確認する必要があります。AMP では、ドキュメントを検証するためのさまざまな方法をご利用いただけます。最も一般的なのは、ウェブ検証ツールか Google ウェブマスター ツールのテストを使用する方法です。この他、Chrome ブラウザのプラグインやデベロッパー コンソールを使用する方法、あるいはビルドに amphtml-validator npm モジュールを統合する方法もあります。
AMPBench を使用する方法もあります。これは、AMP ページのデプロイに関する問題の検証とデバッグを行うためのオープンソースのウェブ アプリケーションとサービスです。
AMP テストのサポートについては、AMP プロジェクトのサポートの利用に関するページをご覧ください。
ステップ 2: コンバージョン トラッキングとアナリティクス用に AMP を設定する
Google 広告 コンバージョン トラッキング
amp-analytics コンポーネントを使用して、Google 広告のコンバージョンをトラッキングします。設定方法については、AMP ランディング ページで Google 広告のコンバージョン測定を設定するの手順をご覧ください。
Google アナリティクス
Google アナリティクスは、amp-analytics でサポートされている分析ソリューションの一つです。AMP ページと非 AMP ページでセッションを統合するには、AMP 用に Google アナリティクス セッション統合の初期設定を行うの手順に沿って操作します。
Google タグ マネージャー
amp-analytics コンポーネントには、Google タグ マネージャーのサポートが組み込まれています。Google タグ マネージャーでは、Google 広告のコンバージョンに加えて、リマーケティング、DoubleClick Floodlight、Google ユニバーサル アナリティクスなどの測定サービスを追加できます。対応タグの一覧をご覧ください。
Adobe Analytics（旧称 Omniture）
Adobe Analytics では、amp-analytics コンポーネントを使用してウェブサイト パフォーマンス トラッキング ソリューションを実装する方法が 2 つあります。iframe（adobeanalytics_nativeConfig）と非 iframe（adobeanalytics）の実装です。各アプローチのメリットとデメリット、実装の詳細を確認する。
Google 広告に関連するその他の一般的なテクノロジーの統合
amp-analytics コンポーネントを使用して、ユーザー アクションやイベントをトラッキングできます。AMP アナリティクスは、40 社を超えるアナリティクス ベンダーによってネイティブ サポートされています。AMP アナリティクスのフレームワークは柔軟性に優れているため、カスタム設定を使用して URL を測定およびトリガーし、自社のサーバーや AMP のネイティブ サポートが利用できないベンダーに分析情報を送信することができます。ご使用のテクノロジーがサポートされていない場合は、サポートを追加するようベンダーにご依頼ください。
AMP アナリティクスでは、柔軟性の高い変数置換も可能です。詳しくは、変数置換に関するドキュメントをご覧ください。
ステップ 3: Google 広告の管理画面で AMP 配信を有効にする
Google 検索では、AMP ページはページからのリンクを介して自動検出されますが、広告主は Google 広告に AMP ページの URL を明示的に入力する必要があります。Google 広告の管理画面で AMP URL を設定する方法については、Google 広告で AMP を使用する方法をご覧ください。
現時点でキャッシュからの配信を利用できるのは、Android 向けの Chrome、Android Google 検索アプリ、モバイル Safari など、ほとんどの主要なブラウザで Google 検索結果ページに掲載されるテキスト広告です。キャッシュ配信の対象範囲は、今後数か月をかけて拡大していく予定です。
Google AMP キャッシュから配信される AMP ページが Google 検索ビューアにどのように表示されるか確認するには、検索 AMP テストツールに AMP の記事を入力して、[プレビュー リンク] をクリックしてください。
また、Google 広告のトラフィックを AMP ランディング ページに誘導したいが、オーガニック検索の結果に表示したくないという場合は、通常のウェブページと同様に、該当する AMP ページの robots.txt に Disallow ディレクティブを追加してください。
ランディング ページの AMP コンテンツを更新する
ユーザーが Google AMP キャッシュに対して AMP ドキュメントをリクエストすると、次にリクエストするユーザーに最新のコンテンツを提供できるようにするために、コンテンツがキャッシュされた後に Google AMP キャッシュから更新が自動的にリクエストされます。このモデルでは、AMP ドキュメントの更新が自動的にすばやく反映されるため、ドキュメントの更新後に更新前のバージョンが表示されることはほとんどありません。また、必要に応じて、update-cache API を使用して AMP キャッシュのコンテンツを更新または削除することもできます。
AMP プロジェクトでは、日々新しい機能やコンポーネントが追加されています。まだ追加されていない機能があれば、コードを貢献するか、GitHub で問題を投稿して追加をリクエストできます。
無効な AMP ページに対する処理
ページが無効になると、AMP キャッシュは数回のリクエスト内でそのことを検出し、AMP ページを配信するオリジンへのリダイレクトを開始します。AMP キャッシュ配信に戻るまでに 1 ～ 2 日かかることがあります。