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