, , ,

行動喚起(CTA)

¥2,999.00

AMP for WPに行動喚起(CTA)をポップアップで表示する機能を追加するアドオン

AMPのページで効果的なCTA(Call To Action:顧客にある行動を起こしてもらうよう誘導すること)を設置することで顧客に注意喚起し、リード獲得が期待できます。

AMPのページのサイトの上部下部、コンテンツ間など、あらゆる場所に自由にCTAを設置することができます。

CTAは商品を紹介したりオファーを提供したりする通知手段として最適です。

商品をよく知ってもらうことで、コンバージョン率の向上が見込めます。

CTAを設置して、モバイルユーザーの注意を引きつけます。

CTA(Call To Action)はサイト訪問者にあなたの商品やサイトについてよく知ってもらうための手段として非常に効果的な手段の1つです。

このアドオンを導入するとAMPページにCTAを設置することが可能になります。

顧客に特定のアクションを起こしてもらう、例えば商品ページで「詳細を確認する」ボタンをクリックすると詳細ページへ移動したり、レストラン紹介ページで「今日お店を訪問する」ボタンをクリックするとその店の予約サイトへ移動したりするようにCTAにリンクを追加することができます。

このアドオンをフルに活用して、モバイルユーザーからのコンバージョン率をアップさせましょう。

スティッキーバーでサイト全体に通知メッセージを表示できます。

CTA バーはウエッブサイトページの下部に画面全幅に固定表示されるタイプのCTAです。

画面に固定されてバー状に通知メッセージが表示されることから、スティッキーバーと呼ばれます。

このタイプのCTAを使って全サイトのどのページにも通知メッセージを表示させることができて便利です。

ボックスタイプのCTAならAMPサイトのあらゆるところに設置が可能です。

ボックス画面で表示されるCTAの設置はとても簡単です。

設定パネルから表示位置、文字の色、ボタンの色、背景色などを自由に設定できます。

また、設定した位置に自動的にCTAを表示させたり、CTAを表示したくないページがあればそのページでは表示しないように設定したりと大変便利です。

また、CTAボックスは作成に数の制限はありません。

複数の箇所にCTAボックスを設置することも可能です。

CTAを効果的にサイトに設置してユーザーの興味を惹きつけ、モバイルユーザーからのコンバージョン率をアップさせましょう。

行動喚起(CTA)の使い方

 

CTAの種類

CTA(Call To Action)はサイト訪問者にあなたの商品やサイトについてよく知ってもらうための手段として非常に効果的な手段の1つです。

CTAを表示するには「ボックス」と「バー」の2種類があります。

  • CTA ボックス:サイトのコンテンツ内(上・中間・下部)にCTAボタンをボックス画面で表示するタイプのCTAです。amp-cta_AMP>AMPCTA>ボックス-サンプル
  • CTA バー:CTA バーはウエッブサイトページの下部に画面全幅に固定表示されるタイプのCTAです。
    amp-cta_AMP>AMPCTA>バー-サンプル

 

CTA BOX

サイトのコンテンツ内(上・中間・下部)にCTAボタンをボックス画面で表示するタイプのCTAです。

amp-cta_AMP>AMPCTA>ボックス-サンプル

CTA BOXの作成

CTA BOXをボックスを作成してみましょう。作成手順は以下の通りです。

  1. サイドメニュー > [AMP CTA] > [CTA ボックス] をクリックします。
    amp-cta_AMP CTA(post)>CTAボックス
  2. [新しいCTAボックスを追加] をクリックします。
    amp-cta_AMP CTA(post)>CTAボックス>新しいCTAボックスを追加
  3. 表示されたCTA編集画面の各項目を設定
    amp-cta_AMP CTA(post)>CTAボックス>新しいCTAボックスを追加>編集+保存

    1. CTAタイトル  :識別しやすい任意のCTAのタイトルを入力します。
    2. CTAの説明   :顧客にどんなことをこのCTAで伝えたいのか、その説明を入力します。
    3. ボタンタイトル : 設置するボタンに表示させる文字を入力します。
      例)「詳細を見る」、「続きを読む」、「今すぐ購入」、「購読する」など
    4. URL      : CTAボタンをクリック後のリダイレクト先のURLを設定します。
    5. AMP CTAショートコード: CTAを作成すると固有のショートコードが自動的に生成されます。このコードを任意のページに埋め込むと、このCTAが表示されます。
    6. [公開/更新] をクリックします。CTA ボックスを埋め込んだページ
      amp-cta_AMP CTA(post)>CTAボックス-ショートコード埋め込み
      AMPサイトでは以下のように表示されます。
      amp-cta_AMP CTA(post)>CTAボックス-ショートコード埋め込み>表示画面

CTA ボックスの作成は以上です。

 

CTA ボックスの設置

CTA ボックスを表示する位置や、色などの設定は以下の手順で行います。

  1. サイドメニュー > [AMP] > [AMP CTA] > [ボックス] をクリックします。
    amp-cta_AMP>AMPCTA
  2. 表示された設定画面の各項目を設定します。
    amp-cta_AMP>AMPCTA>ボックス>CTAボックス表示設定

    1. CTA ボックスをコンテンツに自動的に表示:クリックして有効化します。
      チェックして有効化すると、詳細設定の項目が表示されます。
    2. 表示するCTAを選択してください:表示するCTAボックスをプルダウンリストから選択します。
      ※前項の手順で作成されたCTAボックスがリストに表示されます。
    3. コンテンツの上部:クリックして有効化すると、CTAボックスがコンテンツの上部に設置されます。
    4. コンテンツの間に表示:クリックして有効化すると、CTAボックスがコンテンツの真ん中に設置されます。
    5. コンテンツの下部に表示:クリックして有効化すると、CTAボックスがコンテンツの下部に設置されます。
  3. CTAボックスとボタンの色は自由に変更することができます。変更するには以下の各項目を設定します。
    amp-cta_AMP>AMPCTA>ボックス>CTAボックスの色設定+保存

    • ボックスの背景    :CTA ボックスの背景の色を設定します。
    • タイトルの色     :CTA ボックスの文字の色を設定します。
    • 説明文の色      :CTAボックスの説明文の色を設定します。
    • ボタンの背景     :CTA ボックスのボタンの色を設定します。
    • ボタンのテキストの色 :CTA ボックスのボタンに表示される文字の色を設定します。

 

CTA BOXの設定は以上です。

 

CTA バー

CTA バーはウエッブサイトページの下部に画面全幅に固定表示されるタイプのCTAです。

amp-cta_AMP>AMPCTA>バー-サンプル

 

CTA バーの作成

CTA バーを作成してみましょう。作成手順は以下の通りです。

  1. サイドメニュー > [AMP CTA] > [CTA バー] をクリックします。
    amp-cta_AMP CTA(post)>CTAバー
  2. [新しいCTAバーを追加] をクリックします。
    amp-cta_AMP CTA(post)>CTAバー>新しいCTAバーを追加
  3. 表示されたCTA編集画面の各項目を設定します。
    amp-cta_AMP CTA(post)>CTAバー>新しいCTAバーを追加>CTAバーの編集①

    1. CTAバーのタイトル:CTAバーのタイトルを入力します。
    2. AMP CTA バーの設定
      • CTA バーのコンテンツ:クリックして有効化します。
      • CTA バーの説明:CTA バーで表示する内容を入力します。
    3. CTA バーの設置場所
      amp-cta_AMP CTA(post)>CTAバー>新しいCTAバーを追加>CTAバーの編集②バーの場所
      プルダウンリストから設置場所を「上部」または「下部」のいずれかを選択します。
    4. ボタンの設定
      amp-cta_AMP CTA(post)>CTAバー>新しいCTAバーを追加>CTAバーの編集③ボタンの設定

      • 主ボタン: クリックして有効化すると、詳細設定項目が表示されます。
        • ボタンの文字:ボタンに表示させる文字を入力します。
          例)「詳細を見る」、「続きを読む」、「今すぐ購入」、「購読する」など
        • ボタンのURL:CTAボタンをクリック後のリダイレクト先のURLを設定します。
      • 副ボタン:主ボタンと同じ機能です。クリックして有効化すると、CTA バーに表示されます。
      • 閉じるボタン:クリックして有効化するとAMP バーに [閉じる] ボタンが表示されます。
        • カスタムボタンタイプ:閉じるボタンのタイプを「X」または「カスタムテキスト」から選択します。
        • [カスタムテキスト] を選択した場合は、入力欄に任意の文字を入力します。
          例)「閉じる」など
          amp-cta_AMP CTA(post)>CTAバー>新しいCTAバーを追加>CTAバーの編集④閉じるボタン(カスタム)
    5. 配色設定
      amp-cta_AMP CTA(post)>CTAバー>新しいCTAバーを追加>CTAバーの編集⑤配色

      • タイトルの色:CTA バーのタイトル文字の色を設定します。
      • バーの背景色:CTA バーの背景色を設定します。
      • 主ボタンの文字色:CTA バーに表示される主ボタンの文字色を設定します。
      • 主ボタンの背景色:CTA バーに表示される主ボタンの背景色を設定します。
      • 副ボタンの文字色:CTA バーに表示される副ボタンの文字色を設定します。
      • 副ボタンの背景色:CTA バーに表示される副ボタンの背景色を設定します。
      • 閉じるボタンの文字色:CTA バーに表示される閉じるボタンの文字色を設定します。
      • 閉じるボタンの背景色:CTA バーに表示される閉じるボタンの背景色を設定します。
    6. 表示条件:AND / OR 条件
      CTAバーを表示する条件を3つのプルダウンリストから選んで選択します。
      amp-cta_AMP CTA(post)>CTAバー>新しいCTAバーを追加>CTAバーの編集⑥条件設定
      ここで設定した条件を満たした場合にCTA バーが表示されます。

      • AND/ORボタン :条件を追加する場合は、AND/ORボタンをクリックします。
      • 削除アイコン  :条件を削除する場合にクリックします。
        例)上図は「投稿タイプ」が「投稿」の場合にCTAバーを表示します。
    7. CTAバーのステータス
      amp-cta_AMP CTA(post)>CTAバー>新しいCTAバーを追加>CTAバーの編集⑦CTAバーステータス

      • 有効:バー ステータスを表示する場合は有効を選択します。
      • 無効:バー ステータスを非表示にする場合は無効を選択します。
    8. [公開] をクリックします。
      amp-cta_AMP CTA(post)>CTAバー>新しいCTAバーを追加>CTAバーの編集⑧公開
      以下のようなCTAが画面に表示されます。
      ★画像差し替え★

 

CTAバーの設定は以上です。

 

Contact バー

コンタクトバーはサイト画面下部に表示されます。サイト訪問者がサイト管理者にコンタクトを撮りたい場合は、表示されているアイコンからコンタクト手段を選択することができます。

  1. サイドメニュー > [AMP] > [AMP CTA] をクリックします。
    amp-cta_AMP>AMPCTA
  2. [3.コンタクトバー] をクリックします。
    amp-cta_AMP>AMPCTA>コンタクトバー
    表示された設定画面の各項目を設定します。
  3. コンタクトバー
    amp-cta_AMP>AMPCTA>コンタクトバー>設定+保存

    • コンタクトバー:クリックして有効化すると、AMPサイトにコンタクトバーが表示されます。
      また、詳細設定項目が表示されるので、各項目を設定します。
    • 電話する:クリックして有効化すると、AMPサイトに「電話」のアイコンが表示されます。
      • 電話番号を入力:国番号を含めた電話番号を入力します。
        例)日本の場合は電話番号の頭に国番号「+81」を含める
    • メール:クリックして有効化すると、サイトに「メール」アイコンが表示されます。
      • メールアドレスを入力:問い合わせ先のメールアドレスを入力します。
    • Skype:クリックして有効化すると、サイトに「Skype」アイコンが表示されます。
      • Skype IDを入力:SkypeIDを入力します。
    • WhatsApp:クリックして有効化すると、サイトに「WhatsApp」アイコンが表示されます。
      • WhatsAppで使用する電話番号を入力:WhatsAppで使用する電話番号を入力します。
        ※上記の電話番号と同じ
  4. 配色設定
    • コンタクトバーの背景色:コンタクトバーの背景色を設定します。
  5. [更新] をクリックします。

amp-cta_AMP>AMPCTA>コンタクトバー表示画面

 

CTAの表示位置の変更

CTAがモバイルデバイス上での見栄えよくなかった場合、以下の手順で表示位置を変更できます。

  1. サイドメニュー > [AMP] > [デザイン] をクリックします。
    amp-cta_AMP>デザイン
  2.  [ヘッダー]  をクリックします。
    amp-cta_AMP>デザイン>ヘッダ
  3. [ヘッダータイプ]:3種類のヘッダー から、画面上にボタンが表示されている真ん中のデザインを選択します。
    amp-cta_AMP>デザイン>ヘッダ>ヘッダのタイプ
  4. [ナビゲーションメニューのデザイン] をクリックして有効化します。
    amp-cta_AMP>デザイン>ヘッダ>ナビゲーションメニューのデザイン
    画面下部に [Call to Action] の項目が表示されます
  5. クリックして有効化すると、設定項目が表示されます。
    amp-cta_AMP>デザイン>ヘッダ>ナビゲーションメニューのデザイン>CTAの位置
  6. モバイルデバイス上のCTAの位置:リストから「Header(ヘッダー)」または「Menu(メニュー)」を選択します。(上図)
  7. 画面下の[変更内容を保存] をクリックします。
    amp-cta_AMP>デザイン>ヘッダ>ナビゲーションメニューのデザイン>CTAの位置>保存
    以下のようなCTAが画面に表示されます。下画像:左「メニュー」、右「ヘッダー」
    ★画像差し替え★

CTAの表示位置の変更は以上の手順で行います。

レビュー

レビューはまだありません。

“行動喚起(CTA)” の口コミを投稿します

メールアドレスが公開されることはありません。 が付いている欄は必須項目です