ランディング ページの読み込みが速いほど、コンバージョン数が増える傾向があります。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 仕様に準拠していることを確認します。AMP にはいくつかの検証方法があります。AMP ページを検証する最も一般的な方法は、AMP ウェブ検証ツールまたは Search Console の AMP テストを使用することです。AMP Validator Chrome 拡張機能とデベロッパー コンソールを使用することも、amphtml-validator npm モジュールをビルドに統合することもできます。
AMP テストに関するサポートについては、AMP サポートページをご覧ください。
ステップ 2: コンバージョン トラッキングとアナリティクス用に AMP を設定する
Google 広告 コンバージョン トラッキング
Google 広告のコンバージョンをトラッキングするには、amp-analytics コンポーネントを使用します。設定方法については、AMP ランディング ページで Google 広告のコンバージョン測定を設定するの手順をご覧ください。
Google アナリティクス
Google アナリティクスは、amp-analytics でサポートされている分析ソリューションの一つです。AMP ページと非 AMP ページでセッションを統合できるようにするには、AMP 用に Google アナリティクス セッション統合の初期設定を行うの手順に沿って操作します。
Google タグ マネージャー
amp-analytics コンポーネントには、Google タグ マネージャーをサポートする機能があらかじめ組み込まれています。Google 広告のコンバージョンに加えて、Google タグ マネージャーを使用して、リマーケティング、Floodlight、および同様の測定サービスを追加できます。対応タグの全リストをご覧ください。
Adobe Analytics
Adobe Analytics では、amp-analytics コンポーネントを使用してウェブサイトのパフォーマンス トラッキング ソリューションを実装する方法として、iframe（adobeanalytics_nativeConfig）と iframe 以外（adobeanalytics）の 2 つの方法が用意されています。各方法のメリット、デメリット、実装の詳細については、Adobe Analytics AMP のドキュメントをご覧ください。
Google 広告に関連するその他の一般的なテクノロジーの統合
amp-analytics コンポーネントを使用すると、ユーザーのアクションやイベントをトラッキングできます。AMP アナリティクスは、40 社以上のアナリティクス ベンダーからネイティブにサポートされています。このフレームワークは柔軟性が高く、カスタム構成を使用して URL を測定、トリガーし、分析情報を独自のサーバーや、ネイティブ AMP をサポートしていないベンダーに送信できます。サポートされていないテクノロジーを使用している場合は、ベンダーにサポートの追加を依頼してください。
AMP アナリティクスでは、柔軟な変数置換も可能です。詳しくは、変数置換のドキュメントをご覧ください。
ステップ 3: Google 広告の管理画面で AMP 配信を有効にする
Google 検索の AMP ページは、ページからのリンクを介して自動検出されますが、広告主は Google 広告で AMP ページの URL を明示的に入力する必要があります。Google 広告の管理画面で AMP URL を設定する方法について詳しくは、Google 広告で AMP を使用する方法をご覧ください。
また、Google 広告のトラフィックを AMP ランディング ページに誘導したいが、オーガニック検索結果には表示したくない場合は、通常のウェブページと同様に、関連する AMP ページの Disallow ディレクティブを robots.txt ファイルに追加します。
AMP にない機能を見つけた場合は、コントリビュートするか、GitHub の問題を開いてリクエストできます。