一般に読み込みの速いランディング ページでは、より多くのコンバージョンを獲得できます。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 でサポートされている分析ソリューションの 1 つです。AMP ページと非 AMP ページでセッションを統合できるようにするには、AMP 用に Google アナリティクス セッション統合の初期設定を行うの手順に沿って操作します。
Google タグ マネージャー
amp-analytics コンポーネントには、Google タグ マネージャーのサポートが組み込まれています。Google 広告のコンバージョンに加えて、Google タグ マネージャーを使用して、リマーケティング、DoubleClick Floodlight、Google ユニバーサル アナリティクスなどの測定サービスを追加することもできます。対応タグの全リストをご覧ください。
Adobe Analytics（旧称 Omniture）
Adobe Analytics では、amp-analytics コンポーネントを使用してウェブサイト パフォーマンス トラッキング ソリューションを実装する方法が 2 つ提供されています。1 つは iframe 方式（adobeanalytics_nativeConfig）、もう 1 つは非 iframe 方式（adobeanalytics）です。各アプローチのメリットとデメリット、実装の詳細を確認します。
Google 広告に関連するその他の一般的なテクノロジーの統合
amp-analytics コンポーネントを使用して、ユーザー アクションやイベントをトラッキングできます。AMP アナリティクスは、40 社を超えるアナリティクス ベンダーによってネイティブ サポートされています。AMP アナリティクスのフレームワークは柔軟性に優れているため、カスタム設定を使用して URL を測定およびトリガーし、自社のサーバーや AMP のネイティブ サポートが利用できないベンダーに分析情報を送信することができます。ご使用のテクノロジーがサポートされていない場合は、サポートを追加するようベンダーにご依頼ください。
AMP アナリティクスでは、柔軟性の高い変数置換も可能です。詳しくは、変数置換に関するドキュメントをご覧ください。
ステップ 3: Google 広告の管理画面で AMP 配信を有効にする
Google 検索では、AMP ページはページからのリンクを介して自動検出されますが、広告主は Google 広告に AMP ページの URL を明示的に入力する必要があります。Google 広告の UI で AMP URL を設定する方法について詳しくは、Google 広告で AMP を使用する方法をご覧ください。
また、Google 広告のトラフィックを AMP ランディング ページに誘導したいが、オーガニック検索の結果に表示したくないという場合は、通常のウェブページと同様に、該当する AMP ページの robots.txt に Disallow ディレクティブを追加してください。
AMP プロジェクトでは、日々新しい機能やコンポーネントが追加されています。まだ追加されていない機能があれば、コードを貢献するか、GitHub で問題を投稿して追加をリクエストできます。