ビジュアルデザインスタジオの設定

[デザイナー設定(Designer Settings)]には、個別のアプリに対してビジュアルデザインスタジオ(Visual Design Studio)を構成するための設定がすべて含まれています。[デザイナー設定]は、ページとフィーチャーのタグ付け時、およびガイド作成時のデザイナーの動作に影響します。[基本設定(Basic Settings)]を使って、デザイナーの起動動作を変更し、コードビルディングブロックへのアクセスを制御します。[推奨される一致クラスの除外(Suggested Match Class Exclusions)]は、フィーチャーのタグ付けおよびガイドのターゲット設定で、要素をターゲット設定するときに、推奨されるCSSターゲットを微調整するために使用します。

[デザイナー設定]タブは、[サブスクリプション設定(Subscription Settings)]の[アプリの詳細(App Details)]にあります。

DesignerSettingsTab.png

 

要件

  • Pendo管理者ユーザーはデザイナー設定の変更が可能です。

 

基本設定

デザイナー起動URLトークンを無効化する

ページ、フィーチャー、ガイドのいずれかの[アプリ内の管理(Manage In-App)]ボタンからデザイナーを起動すると、新しいタブが開き、アドレスバーにアプリURLおよび認証トークンが表示されます。ユーザーが認証されると、デザイナーの読み込み時にURLからトークンが削除されます。これがデフォルトの動作であり、ほとんどのお客様で問題なく動作します。アプリ上でのURLトークンを使用したデザイナー起動に問題が発生した場合は、この設定で起動URLトークンを無効化し、代わりにwindow.openerメソッドを使用してデザイナーの新しいタブを開きます。

ガイドコードブロックへのアクセスを防止する

この設定により、ビジュアルデザインスタジオのカスタムコードブロック(Custom Code Block)ビルディングブロックが無効になります。コードブロックは、ガイドステップ読み込み時に、ガイドステップにCSS、HTML、およびJavascriptを追加し、実行します。コードブロックは、ボタンや画像のようにガイド内のコード要素をカスタム化するために使用され、動作の記述にはJavascriptが使われます。また、現在のガイドステップやお客様のアプリケーションをはじめとして、DOM要素の外観や動作を変更することもできます。これは強力なツールであり、ガイドで創造的なソリューションをいろいろと実装するのに役立ちます。一部のお客様は、標準で提供されているビルディングブロックのみを使用し、ガイド作成者のコードブロックのアクセスを無効にしています。

デザイナーでコードブロックを無効にするには、カスタマーサクセスマネージャーまたはPendoの担当者にお問い合わせください。

ガイドデザイナーのキーボードショートカットを無効化する

Pendoサブスクリプションのアクティブユーザーは、Alt(MacではOption)+Shift+8を押せば、いつでもアプリケーション上でデザイナーをアクティブにできます。このショートカットは、Pendoの[アプリ内の管理]ボタンを見つけるのに便利です。このマクロが、お客様側のアプリケーションのマクロに干渉している場合や、PendoユーザーのみがPendoからデザイナーを起動できるようにしたい場合は、このショートカットを無効にできます。

 

推奨される一致クラスの除外

SuggestedMatch.png

[推奨される一致クラスの除外]は、ビジュアルデザインスタジオでフィーチャーにタグを付けたり、ガイドステップに対して要素をターゲット設定したりするときに、特定のCSSクラスを推奨される一致から除外するために使用します。除外する必要があるクラスは、動的IDを持つクラス、または不安定なタグや過度に汎用的なタグになる可能性があるクラスです。

注:推奨される一致からクラスを除外しても、イベントの生データにおける収集を防止することはできません。

クラスを除外する理由

ビジュアルデザインスタジオでフィーチャーにタグを付ける場合、要素タグ付けツールを使用して、アプリ内の要素を選択し、一意のターゲットルールを作成します。このルールは、すべてのPendoクリックイベントデータの中で、そのターゲット要素にのみ一致する必要があります。タグ付けツールでは、ターゲットルールの推奨、親要素リストの提供、またはカスタムターゲットルールの入力を行うことができます。

[推奨される一致(Suggested Match)]オプションは、選択した要素のプロパティから、一意の識別子を提案します。タグ付けツールは、Sizzleクエリを使用して要素を検索し、アプリで識別されたカスタムHTML属性を検索し、[推奨される一致クラスの除外]リストにあるCSSクラスを削除します。結果は、ID、カスタムHTML属性、CSSクラスなど、ほとんどのアプリケーションで一般的に一意である要素が優先されます。

一部のアプリケーションフレームワークは、動的に生成されたCSSクラスを使用します。これらのクラスは一意または変数です。通常、クラス名の一部は、コンテンツがレンダリングされる時に変更されます。Pendoは、ユーザーがその要素をクリックしたときに正確なクラスを保存し、推奨される一致によって、そのフィーチャーがタグ付けされた時点の正確なクラスに一致するタグ付けルールが生成されます。クラス名の変数部分が変わることで、ユーザーがいつその要素をクリックしてもフィーチャーにタグ付けしたルールと一致しなくなります。その結果、その要素に対するクリックはすべて、そのタグ付けルールでキャプチャされることはありません。[推奨される一致クラスの除外]は、これらの動的CSSクラスおよびその他の不要なクラスを推奨される一致から除外するために使用されます。動的クラスが除外されると、推奨される一致を生成するために安定したプロパティのみが使用されるため、推奨されるタグ付けルールの方が信頼性が高くなります。

除外を追加する

クラスでは大文字と小文字は区別され、特定の状況でのアンダースコア、ハイフン、およびワイルドカードを除いて、特殊文字はサポートされません。除外はアプリケーション固有です。

サポートされる特殊文字

  • アンダースコア _ - 制限なしで使用可能
  • ハイフン - - クラスの先頭または末尾では使用不可
  • ワイルドカード * - 除外されたクラスに値が含まれていることを示すために、クラスの末尾に使用可能

ClassFormats.png

 

1.[除外の入力(Enter Exclusion)]フィールドにクラスを入力します。このフィールドに入力すると、クラスの形式が受け入れ可能かどうかを検証します。

ClassExclusionExample.png

 

2.[除外を追加(+ Add Exclusion)]をクリックして、クラスをリストに追加します。追加されたクラスは、フィーチャーのタグ付けまたはガイドのターゲット設定に対して、推奨される一致の対象にはなりません。イベントの生データにおける収集は引き続き行われます。

 

除外を削除する

1.リストのクラスにカーソルを合わせると削除ボタンが表示されます。

DeleteClass.png

2.削除ボタンをクリックします。警告モーダルで処理を確認します。

DeleteClassModal.png

3.[除外の削除(Delete Exclusion)]をクリックして、リストからクラスを削除します。これは即時に処理されます。クラスは必要に応じて再度追加できます。