特に複数のiframeを使用しているサイトにおいて、ガイド、ページのタグ付け、フィーチャーのタグ付けを行う際に、優れたiframeの操作性を実現するために、Pendoはビジュアルデザインスタジオ（Visual Design Studio）を開発しました。ビジュアルデザインスタジオは「iframe対応」であり、アプリケーション内のiframeの存在を検出して、使いやすいUIで表示し、アナリティクスやガイドのターゲティングのためにそれらをタグ付けすることができます。また、ビジュアルデザインスタジオはプラグインや拡張機能が不要で、ネイティブでiframeをサポートします。この方法は、ブラウザに事前に追加の拡張機能をインストールする必要がないため、より安全です。
iframeの設定サポートとルール
ここでは、Pendoでiframeでの優れた操作性を実現するためのベストプラクティスガイドラインをご紹介します。
- ルール1：上位のウィンドウには、Pendoエージェントがインストールされている必要があります。
注：厳密には、これはPendoがiframeサイトで動作するための必須要件ではありませんが、ビジュアルデザイナーを使用する場合に優れた操作性を実現します。
- ルール2：最上位の1つのウィンドウまたはiframeには、Pendoエージェントがインストールされている必要があります。上位のウィンドウにPendoエージェントがインストールされていない場合は、すべての「子」iframeを含む「親」iframeが1つ必要です。
- ルール3：Pendoエージェントは、「最上位の」ウィンドウまたはiframeと、Pendoをインストールする「子」iframeの間にあるすべてのiframeにインストールする必要があります。
注：無効な構成の例を示します。親にPendoエージェントがインストールされていないと、iFrameは「最上位」のPendoエージェントをトレースできません。
- ルール4：Pendoエージェントのすべてのインスタンスは、「最上位の」ウィンドウまたはiframeと同じサブスクリプションキーを使用する必要があります。
注：サブスクリプションキーは、JavaScriptのスニペットの下部にあるインストールスクリプトに含まれています。
- ルール5：ルール3が守られている限り、Pendoはネストされたすべてのiframeをサポートします。
ガイドとiframe
ビジュアルデザインスタジオでは、Pendoエージェントのアップデートにより、iframeでガイドを表示する際のサポートが改善されました。すべてのiframeのPendoエージェントは、個々のiframeが読み込まれるたびに相互に通信します。Pendoエージェントは各iframe間でページルールやターゲット要素を確認し、その時々でガイドを表示するのに最適なiframeを決定することができます。また、Pendoエージェントで確立された通信により、複数のiframeでウォークスルーを続けることができるため、アプリ全体を通してお客様をシームレスに誘導することができます。
ウォークスルーを作成する際、個々のガイドステップを個別のiframeまたは個別のページやフィーチャー（組み合わせまたは両方）に割り当てることができます。これにより、複数のiframeにまたがるガイドコンテンツを作成できます。
ページやフィーチャーのタグ付けとiframe
各iframeにPendoをインストールした後、ビジュアルデザインスタジオを使って、任意の数のiframeにページやフィーチャーをタグ付けすることができます。ビジュアルデザインスタジオでは、iframeを視覚的にもURLによっても簡単に識別できるため、適切なタグ付けが可能です。フィーチャーのタグ付けは、アプリケーションにiframeがない場合とまったく同じワークフローです。