メインコンテンツにスキップ

製品ツアーをデザインする

このステップバイステップの記事でProduct Tourの設定方法を学びましょう。

対応者:Liam Keegan

Product Tours は、お客様により良い初回製品体験を提供し、より早い導入を促進するための機能です。アプリ内メッセージのシリーズを作成して、お客様が製品の価値をより早く発見できるよう案内できます。

ツアーのデザインは迅速かつ簡単で、コードは不要です。始め方は以下の通りです:

Product Tourをデザインする

まず、メインメニューからOutboundに移動し、右上の 新しいメッセージをクリックします。

次に、コンテンツタイプとしてProduct tourを選択します。

左のサイドバーからこのコンテンツタイプを選んで、既成のテンプレートから開始することもできます。

注意:Product Toursはデスクトップのウェブアプリ専用に設計されています。モバイルアプリでの多段階の魅力的な体験には、Mobile Carouselsをお試しください。

この例では、最初から始めます。ツアーに短くて印象的なタイトルと説明を付けましょう。例えば、新しいusersをオンボードするツアーをデザインする場合は、「はじめに」と名付けることができます。

Product TourのURLを変更する

Product TourのURLを変更するには:

  1. ツアーを編集に移動します。

  2. ツアーを作成をクリックします。

  3. 下にスクロールして設定をクリックします。

  4. ツアーの構築場所の横にある鉛筆アイコンをクリックします。

  5. ツアーを配置したいURLを入力し、ウェブサイトを変更をクリックします。

注意:変更を加えた後は、メインのProduct Tourページを終了する前に必ず保存して閉じるをクリックしてください!

2023-09-15 15-51-21.gifでの画面キャプチャ

重要:お客様は、会話、ボット、メッセージでツアーを共有するときに、ツアーのタイトルと説明を目にします。

ツアーは任意のチームメンバーから送信できますし、送信者を完全に非表示にすることも可能です。

プロのヒント:アカウントベースマーケティングを利用している場合は、担当者から主要アカウントにツアーを送信することもできます。

ツアー内のボタンのカスタムカラーも設定できます。

注意:カスタムカラーを無効にすると、ツアーはMessengerのカラー設定に合わせられます。

ツアーステップに挿入されたハイパーリンクは、クリックされるまではデフォルトで黒色です。クリックされると、Messengerのアクションカラー(または設定されていればカスタムカラー)になります。

ツアーを構築するサイトを選択してください。

ツアーのデザインを開始するには、「ステップを追加」をクリックします。

新しいウィンドウが開きます。ここで、ツアーを構築したいウェブサイトを追加してください。

URLを追加したら、「ウェブサイトを開く」をクリックしてツアーの構築を開始します。

注意:このURLはツアー構築用であり、お客様にツアーを表示する対象URLではありません。後のステップでページとオーディエンスのターゲティングルールを選択できます。

重要:Product Toursとツールチップに関して、Material UIと「フォーカストラップ」には既知の制限があります。

ツアーメッセージを構築する特定のページを選択してください。

サイトの下部に青いバナーが表示されます。これがツアービルダーです。

ツアーの構築を開始したい製品の特定ページに移動し、「ここでツアーを開始」をクリックします。

さあ、メッセージの作成を始めましょう。

ツアーのメッセージを作成する

選べるメッセージタイプは3種類あります:投稿、ポインター、ビデオポインターです。

それぞれの使い方は以下の通りです。

投稿で新機能を紹介する

投稿はツアーの開始時にお客様の注意を引くのに最適です。

投稿はページの中央に表示され、特定の要素を指し示しません。画像を挿入したり動画を埋め込んだりして製品を紹介できます。また、属性を使ってメッセージをパーソナライズし、例えばお客様の名前で挨拶することも可能です。

注意:ツアーをパーソナライズするために会社データ属性を使用する場合、ツアー開始時にMessengerを起動するウェブサイトにcompany_idが含まれていることを確認してください。

company_idを含めない場合、ツアー内の会社データ属性は指定したフォールバック値にデフォルト設定されます。

ポインターでお客様を案内する

ポインターはお客様に製品の使い方を示すのに最適です。ボタンなど特定のウェブサイト要素を指し示して案内できます。指し示したい要素をクリックし、ポインターに内容を追加してください。

指し示したい要素がツアービルダーバーの後ろにある場合は、左の「非表示」をクリックしてツアービルダーを隠してください。

テキストだけでなく、画像の挿入、絵文字の追加、動画の埋め込み、属性の追加も可能で、ポインターをより魅力的にできます。ポインターが表示されると、自動的に背景が暗くなりメッセージが強調されます。

ヒント:ページの異なる部分にポインターを作成すると、ページは自動的に各メッセージにスクロールします。

デフォルトでは、お客様はツアーの「次へ」をクリックしてメッセージを進めます。入力フィールドに入力させたり、ウェブサイト要素をクリックさせて次のステップに進ませたい場合は、ツアーの進行方法を選択してください。

注意:「フィールドに入力」オプションでは、例えば「タイトル」や「説明」など複数のテキストフィールドを含む要素を選択した場合、お客様はすべてのフィールドに入力しないと進めません。

「フィールドに入力」は以下のHTML要素で動作します:

<input> 要素

<textarea> 要素

<select> 要素

contenteditable="true" の <div> 要素

この記事で複数ページにわたるProduct Toursの作成方法を学べます。

または、より魅力的なツアーのためにカスタムボタンテキストを定義できます。

ビデオポインターでお客様を個別に案内する

ビデオポインターは、短い字幕付きの動画を使って、あなたやチームメンバーが直接お客様を案内し、関与を深めることができます。

ポインターの適切なサイズと位置を選ぶ

ポインターとビデオポインターには2つのサイズがあります。(上記のビデオポインター☝️は大サイズです。)デフォルトのポインターサイズは小です。サイズを切り替えるには、「詳細設定」をクリックし、ドロップダウンから適切なサイズを選択します。

ここで最適なポインター位置も定義できます。自動左、右、上、下から選択してください。

注意:お客様のウィンドウサイズが選択した最適位置を許容しない場合、ポインターは「自動」に戻り、より適切な位置に移動します。

メッセージの連続シーケンスを作成する

お客様に包括的なツアーを提供するために、メッセージの連続シーケンスを作成しましょう。投稿、ポインター、ビデオポインターの組み合わせで最適なツアーを構築できます。

ステップの順序を変更したい場合は、移動したいステップにカーソルを合わせ、このアイコンでドラッグしてください。

ツアーの作成が完了したら、簡単にプレビューできます。

ここで、お客様にツアーがどのように表示されるか確認できます。

ツアー完了を祝おう 🎉

ツアーの最後のステップで、紙吹雪を降らせて盛り上げることができます。

「設定」をクリックし、このトグルを「オン」に切り替えるだけです。

お客様がツアーを完了したときに表示される画面は以下の通りです。

お客様にツアーの一時停止や再開を許可する

この設定タブから、お客様がツアーを一時停止できるかどうかを選択できます。

ツアーを一時停止すると24時間遅延し、その後お客様がトリガーされる正しいページにいる限り再度受け取ります。ツアーは複数回一時停止でき、お客様が適切なタイミングでツアーを受けられるようにします。緊急でないメッセージに最適です。👌

注意:この「一時停止された」ツアーは特定のルール(例:ページ滞在時間やURLルール)のみ適用され、他のターゲティングルール、営業時間、スケジュールや繰り返しスケジュールには適用されません。メッセージの状態は尊重されるため、メッセージがライブでない場合は再配信されません。

一時停止後にメッセージが再マッチしたら、関連する一時停止記録を完了済みとしてマークします。

「再開」オプションは、ツアーの各ステップ(最初のステップを除く)にボタンを追加し、お客様が最初に戻って再度ツアーを受けられるようにします。

注意:

  • ユーザーが入力して次のステップに進むツアーでは、このオプションの使用は推奨しません。再開時に入力内容が保持されないためです。

  • 一時停止または再開されたツアーを再度閲覧しても、ツアー統計の追加ビューとしては記録されません。

  • ツアーを1ステップだけ戻すことはできません。

ツアーステップと設定に満足したら、「保存して閉じる」をクリックしてください。

モバイルアプリでProduct Toursを使えますか?

Product Toursはデスクトップのウェブアプリ専用に設計されています。モバイルアプリでの多段階の魅力的な体験にはMobile Carouselsをお試しください。

デスクトップアプリでProduct Toursを使えますか?

Intercomはデスクトップアプリ(Electronフレームワークで構築されたものなど)との統合をサポートしていません。そのため、Product Toursはウェブブラウザで閲覧するデスクトップウェブサイトでのみ利用可能です。

ツアーの起動に問題がある、またはポインターステップで問題が発生していますか?

ツアーが常に正しく送信されるように、こちらのガイドに従ってください。

こちらの回答で解決しましたか?