ヒートマップとセッションリプレイ内のiframeを追跡できますか？

デフォルトでは、Contentsquareはセッションデータに含まれるiframe要素をブロックし、コンテンツのレンダリングを防ぎます。セッションリプレイを視聴したり、ヒートマップを表示したりしている間、iframeコンテンツの代わりに、ページに埋め込まれたiframeを追跡できませんというメッセージが表示されます。

この記事では、Contentsquareを使用してiframeコンテンツを追跡する方法についてのガイダンスを提供し、Contentsquareタグがインストールされている場所に応じてインタラクションをキャプチャするためのさまざまなオプションを概説します。また、iframeを有効にするために必要な手順とHTML属性、iframeの動作およびサードパーティコンテンツに関連する考慮事項と制限についても詳述します。

iframeとは何ですか？

iframeは、別のウェブページに埋め込まれたウェブページです。一般的には、チャットボット、動画、フォームなどのサードパーティサイトからのコンテンツを表示するために使用されますが、同じドメインからのコンテンツを表示することもできます。

iframeのコンテンツがどこから来ているかを判断するには、iframeのソースURL（src=""）を確認します。この例では、iframeのソースURLはYouTubeから来ています：

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe> 

iframeについての詳細は、Mozilla Developer Networkのドキュメントを参照してください。

この記事を完全に理解するために、これらの用語に慣れておいてください：

• iframe '親' ページ - これは<iframe> コードが追加されたページです。このページには通常独自のコンテンツがありますが、埋め込まれたiframeコンテンツも含まれています。これは、ユーザーがブラウザで訪れるページです。
• iframe 'ソース' ページ - これはiframe コンテンツが来ているページです。ソースページのURLは、通常、ユーザーが直接アクセスするページではありません。

Contentsquareでiframeコンテンツを追跡するためのオプションは何ですか？

Contentsquareは、Contentsquareタグがインストールされているページのセッションのみを追跡できます。iframe内のインタラクションを追跡するには、iframeのソースコードを編集できる必要があります。これはサードパーティのiframeでは不可能な場合があります。サードパーティがContentsquareタグを追加することを許可する場合、彼らはプライバシーおよびクッキーポリシーにおいてContentsquareの追跡も考慮する必要があります。

Contentsquareは、以下の方法でiframeコンテンツを追跡するために使用できます：

• Contentsquareタグを親ページのiframeにのみインストールします: Contentsquareは親ページのページコンテンツを追跡しますが、iframe内のインタラクションは追跡されません。
• Contentsquareタグをソースページのiframeにのみインストールします: Contentsquareはiframeのソースページコンテンツを追跡しますが、親ページでのインタラクションは追跡されません。セッションリプレイやヒートマップでは、訪問した親ページが表示されますが、iframe内のインタラクションからのデータのみがキャプチャされます。iframe外の親ページとのユーザーインタラクションはキャプチャされません。
• 同じContentsquareタグを両方のiframeの親およびソースページにインストールします: Contentsquareは親ページとiframeソースページの両方からデータを検出できます。iframeコンテンツはセッションリプレイで別のページとして扱われます。iframeとのインタラクションはユーザーのセッション内の別のタブとして表示され、ユーザーが親ページとiframeソースページの間を切り替えているように見えます。

Contentsquare内でiframeを許可する方法

iframeを表示することを許可すると、Contentsquareはiframeページを読み込むことができますが、ソースページとiframeの両方にContentsquareタグを追加する能力がない限り、iframe内のユーザーインタラクションを追跡することはできません。iframeコンテンツの読み込みにJavaScriptが必要な場合、iframeを許可するとセッションリプレイやヒートマップでiframeが空白として表示される可能性があります。

始める前に

iframeを許可する前に、iframeを許可した後も残る制限を考慮してください:

• iframeにはsrc属性が必要です。
• Contentsquareは、src属性が相対ページパス（例: src=“/page”）を使用している場合、iframeを許可できません。完全なURL（例: src=“https://contentsquare.com/page”）を使用する必要があります。
• 親ページを録画している場合、iframe内のJavaScriptはブロックされます。
• 親ページをキャプチャしている場合、iframe内のインタラクション（クリックやスクロールイベント、入力、CSSアニメーション、DOMの変更など）は追跡されません。
• iframeが指すURLは当社のサーバーに保存され、セッションリプレイが再生されるたびに再読み込みされます。これは、iframeソースページの読み込みが追加の動作を引き起こす場合、予期しない悪影響を引き起こす可能性があることを意味します。
• iframeを許可することは、<iframe>要素自体に属性を追加することを意味します。iframeの親要素に配置することはできません。多くのサードパーティツールは、<iframe>要素を編集することを許可していないため、許可できません。

これらの制限により、ほとんどのサードパーティのiframeはJavaScriptに依存しているため、iframeを許可した後でも表示されない可能性があります。許可されたiframeで機能しないコンテンツタイプの例には以下が含まれます:

• チャットボット
• サードパーティのビデオプレーヤー（YouTubeやVimeoを含む）
• サードパーティのフォーム（Typeformフォームを含む）
• iframeを介して読み込まれるほとんどのサードパーティのWebアプリ
• ほとんどのサードパーティの決済システム

これは、Contentsquareが許可されたiframeの以下の側面のみを表示できることを意味します:

• iframeを介して読み込まれる静的ページコンテンツ（JavaScriptなし）。
• カーソルの動作は親ページに対して相対的に追跡されます。

Contentsquare内でiframeを許可する

1. iframeにdata-hj-allow-iframeをHTML属性として追加します。

表示したいiframeにHTML属性data-hj-allow-iframeを追加することでこれを行うことができます。

<iframe src="https://example.com/page.html" data-hj-allow-iframe=""></iframe> 

これはdata-hj-allow-iframe=""、data-hj-allow-iframe="true"、または単にdata-hj-allow-iframeとして書くことができます。いずれの場合も、値はバックエンドで「true」と表示されます。

3. サイト設定のギアアイコンをクリックして、サイト設定ページにアクセスします。

4. セッションターゲティングとトラッキング メニューを展開します。

5. 許可されたiframeドメイン の見出しの下に、許可したいトップレベルドメイン名を入力します。

許可されたiframeドメインフィールドにドメイン名を入力する際は、トップレベルドメインのみを入力してください。トップレベルドメインは、www、http://、またはhttps://が接続されていないドメインです。たとえば、https://www.contentsquare.com/をこのフィールドに許可したい場合、トップレベルドメインはcontentsquare.comになります。

6. 変更を保存をクリックします。