ビジュアルデザインスタジオ(Visual Design Studio)によるiframeのサポート

最終更新日:

特に複数のiframeを使用しているサイトにおいて、ガイド、ページのタグ付け、フィーチャーのタグ付けを行う際に、優れたiframeの操作性を実現するために、Pendoはビジュアルデザインスタジオを開発しました。ビジュアルデザイナーは「iframe対応」であり、アプリケーション内のiframeの存在を検出して、使いやすいUIで表示し、アナリティクスやガイドのターゲティングのためにそれらをタグ付けすることができます。また、ビジュアルデザイナーはプラグインや拡張機能が不要で、ネイティブでiframeをサポートします。この方法は、ブラウザに事前に追加の拡張機能をインストールする必要がないため、より安全です。

iframeの設定サポートとルール

ここでは、Pendoでiframeでの優れた操作性を実現するためのベストプラクティスガイドラインをご紹介します。

  • ルール1:上位のウィンドウには、Pendoエージェントがインストールされている必要があります。

:厳密には、これはPendoがiframeサイトで動作するための必須要件ではありませんが、ビジュアルデザイナーを使用する場合に優れた操作性を実現します。

  • ルール2:最上位の1つのウィンドウまたはiframeには、Pendo Agentがインストールされている必要があります。上位のウィンドウにPendo Agentがインストールされていない場合は、すべての「子」iframeを含む「親」iframeが1つ必要です。
  • ルール3:Pendo Agentは、最上位のウィンドウまたはiframeと、Pendoをインストールする「子」iframeの間にあるすべてのiframeにインストールする必要があります。

image__17_.png

:これは、無効な設定の例です。iframeが親子関係になっている場合、各iframeにPendo Agentがインストールされている必要があります。Pendo Agentがインストールされていないiframeがあると、子iframeが最上位のiframeのPendo Agentに遡ることができないため、正しく動作しない場合があります。

  • ルール4:Pendoエージェントのすべてのインスタンスは、「最上位の」ウィンドウまたはiframeと同じサブスクリプションキーを使用する必要があります。

:サブスクリプションキーは、JavaScriptのスニペットの下部にあるインストールのスニペットに含まれています。

mceclip0.png

  • ルール5:ルール3が守られている限り、Pendoはネストされたすべてのiframeをサポートします。

ガイドとiframe

ビジュアルデザインスタジオでは、Pendoエージェントのアップデートにより、iframeでガイドを表示する際のサポートが改善されました。すべてのiframeのPendoエージェントは、個々のiframeが読み込まれるたびに相互に通信します。Pendoエージェントは各iframe間でページルールやターゲット要素を確認し、その時々でガイドを表示するのに最適なiframeを決定することができます。また、Pendoエージェントで確立された通信により、複数のiframeでウォークスルーを続けることができ、アプリ全体を通してお客様をシームレスに誘導することができます。

ウォークスルーを作成する際、個々のガイドステップを個別のiframeまたは個別のページやフィーチャー(組み合わせまたは両方)に割り当てることができます。これにより、複数のiframeにまたがるガイドコンテンツを作成できます。

Screen_Shot_2019-09-11_at_11.35.21_AM.png

 

ページやフィーチャーのタグ付けとiframe

各iframeにPendoをインストールした後、ビジュアルデザインスタジオを使って、任意の数のiframeにページやフィーチャーをタグ付けすることができます。ビジュアルデザインスタジオでは、iframeを視覚的にもURLによっても簡単に識別できるため、適切なタグ付けが可能です。フィーチャーのタグ付けも、アプリケーションにiframeがない場合とまったく同じワークフローです。

mceclip1.png

 

この記事は役に立ちましたか?
12人中3人がこの記事が役に立ったと言っています