Contentsquare
こんにちは！お困りですか？
よく検索されるトピック: CS Live, 指標リスト, インテグレーションのリクエスト

最新情報: リリース & アップデート Contentsquare グロースプラン
English (GB) Français

このセクションの記事

  • 更新

Contentsquare タグコンフィグレーター (CSTC) の使い方

英語からAIを使用して翻訳されました

この記事はAI技術を使用して翻訳されたことにご注意ください。正確性を維持するよう努めていますが、一部の詳細は元のテキストを完全に反映していない場合があります。情報に不明な点がある場合は、英語版を参照してください。

Contentsquare Tag Configuratorは、新しい Proおよび Enterpriseプラン（2025年2月11日から）を利用している顧客と、プランにExperience Monitoringが含まれているすべての顧客に提供されています。

Contentsquare Tag Configurator (CSTC)は、タグ関連機能を管理するためのツールで、カスタマイズ可能なコードスニペットを提供し、ニーズに合わせたトラッキングを行うことができます。

あなたまたはContentsquareの実装に関与しているチームは、通常、初期の実装中およびその後、ビジネスニーズの進化に応じて更新を行うためにCSTCを使用します。

セクションにジャンプ

ユースケース

  • 個人データのマスキング：セッションリプレイで特定のページ要素を選択的にマスクおよびアンマスクし、必要なものだけをマスクすることでリプレイ体験を向上させます。
  • 人工ページビュー：ユーザーがページと対話しても別のユニークなページビューとして登録されない場合（例：ポップアップ、SPAなど）に、追加の「ページビュー」を送信および追跡します。
  • カスタムエラー：訪問者が経験したエラーを収集します。たとえば、フォーム検証メッセージや利用できない製品の警告（エラーを分類するための最大5つのキー/値ペアを含む）です。
  • カスタム変数 (CVAR)：ページ、ユーザー、またはセッションに関する追加情報を収集し、ページビュー内で送信します。
  • 動的変数 (DVAR)：セグメンテーションに使用できる追加のセッションレベルの情報を収集します。
  • ページイベント：セグメンテーションに使用できる追加のセッションレベルの情報を収集します。
  • ネットワークリクエスト - URLのマスキング：APIエラーやネットワークの詳細に対して収集されたURLをマスクするためのパターンを登録します。

各ユースケースに対して、特定のテンプレートが下にリストされ、リンクされています。

知っておくべきこと

CSTCの所有権

CSTCを更新および管理するための適切なチームメンバーを特定する必要があります。技術的な知識が必要です。CSTCは、Console Admin権限を持つユーザーのみがアクセスおよび管理できます。

CSTCと他のサードパーティのタグマネージャー

複数のタグ付けプラットフォームを使用する際は、競合を避けるために構成を確認し、追跡することが重要です。

SRIおよび自己ホスト型Contentsquareプロジェクト

CSTCスニペットで変更を加え、公開した後は、次のことを行う必要があります：

  • SRI：手動で新しいスナップショットを生成します。

  • 自己ホスティング：新しいタグを取得します。

仕組み

スニペット、テンプレート、トリガー

CSTCは、タグコマンドを実行するスニペットを使用します。個々のスニペットは、テンプレートとトリガーの2つのコンポーネントを使用して作成および構成します。

  • ステップ1 - スニペットを作成: タグコマンドを実行します
    • ステップ2 - テンプレートを選択して構成: 実行されるアクション
    • ステップ3 - トリガーを選択して構成: アクションを実行するイベント

テンプレートのリストを見る

スニペットを作成すると、次のテンプレートから選択できます:

ユースケース: データマスキング

  • 要素マスキング: 敏感な個人情報や特定のデータなど、ターゲット要素を選択的にマスクし、他の要素はマスクしない
  • 要素アンマスキング: ターゲット要素やページのセクションを選択的にアンマスクし、他の要素はマスクしたままにします。
  • ネットワークリクエスト - URLをマスク（エクスペリエンスモニタリングが必要）: APIエラーやネットワークの詳細に対して収集されたURLをマスクするパターンを登録します。

ユースケース: 人工ページビューの収集

  • 人工ページビュー: ユーザーがページと対話しても、別のユニークなページビューとして登録されない場合に追加の「ページビュー」を追跡します。

ユースケース: カスタムイベント収集

  • カスタム変数: ページ、ユーザー、またはページビュー内で送信されるセッションに関する追加情報を収集します
  • 動的変数: セグメント化に使用できるセッションに関する追加情報を収集します
  • ページイベント: 訪問者の対話を、Contentsquare内でセグメント化するためのフィルターとして使用します

ユースケース: エラー分析

  • カスタムエラー（エクスペリエンスモニタリングが必要）: ブラウズされたウェブページに存在するエラーメッセージを収集します（ユーザーに見えるかどうかに関わらず）

トリガーのリストを見る

選択したテンプレートに応じて、次のトリガーの1つまたは複数が利用可能です:

  • ページビュー前
  • フォーム送信
  • 要素のクリックまたはタップ
  • 履歴の変更
  • ページビュー後
  • 要素の存在
  • ハッシュの変更
  • 要素が表示される
  • 要素が削除される
  • マウスオーバー
  • 要素の挿入

トリガーの完全なリストを確認し、それぞれの使用方法と利用可能なテンプレートを確認してください。

構文の使用法: CSSセレクター入力、補間、および反復可能なコンテキスト

さまざまなテンプレートやトリガーに利用可能な入力フィールドを構成するためのガイダンスを以下に示します。

CSSセレクター入力

CSTCの一部のテンプレート、例えばエレメントマスキングでは、特定の要素をターゲットにするためにCSSセレクターを使用します。

トリガー内でCSSセレクターに依存するスニペットは、document.querySelectorAllメソッドを使用する際のブラウザに似た構文をサポートしています。

CSSセレクターの使用法

構文
カンマで区切られた一般的に使用されるCSSの構文を使用できます:

.classname,#indexname,div[attr=value]

CSTCテンプレートエレメントマスキングCSSセレクターの例.png

補間を使用した動的コンテンツの利用

値として送信するためのプレーンテキストと、データレイヤーから取得した動的コンテンツ（例えば）を活用するために、CSTCは補間と呼ばれるメカニズムを利用します。

補間の使用法

補間を使用すると、ページ設定の入力の1つで使用する変数を指定できます。

テンプレートの利用可能性

構文

補間構文: ${javascriptHere}

波括弧内の内容はJavascript変数として扱われます。

ガイドライン

以下の「例外」にリストされているものを除き、関数呼び出しはサポートされていないことに注意してください。

補間を使用するには、Javascript変数を特定のルート変数に基づいて設定する必要があります。これには以下が含まれます:

  • ウィンドウ
  • ドキュメント
  • ロケーション
  • cookies: アクセス可能なクッキーのキー-バリューマップとそれに対応する値

テンプレートやトリガー入力内で補間を使用でき、補間を一般的なテキストと連結したり、同じ入力内で複数の変数を補間したりすることが可能です。
補間された値が未定義の場合、テンプレートの実行は中止されます。

例

有効 ✅ 無効 ❌
${window.dataLayer[0].pageName} ${dataLayer[0].pageName}
${location.href.pathname} ${document.querySelectorAll("#selector")[0].textContent}

私たちはここにいます:

${location.href.pathname}
${cookies._cs_id}${cookies._cs_s}
${cookies._cs_id}

例外

補間は関数呼び出しを許可することを意図していませんが、いくつかの関数は補間機能内で使用できます:

  • window.location.hash.replace()
    • 人工ページビューテンプレートの#文字を置き換えることを許可します
  • window.sessionStorage.getItem()
    • 歴史的理由から許可されています
  • document.querySelector("<valid-css-selector>").textContent
  • document.querySelector("<valid-css-selector>").value
  • new Date().getTime()

イテラブルコンテキスト

これは、Javascript変数などの配列から値を取得することを可能にします。イテラブルコンテキストは、配列から取得したい値の位置が不明な場合に使用されます。

これは、配列から値をフィルタリングして有用なペイロードを抽出し、それをテンプレートで使用するのに役立ちます。

イテラブルコンテキストの使用

Iterable contextは、配列から値をフィルタリングして有用なペイロードを抽出し、それをテンプレートで使用するのに役立ちます。

利用可能性
Iterable contextは、以下のテンプレートで使用できます：

構文
iterable contextの入力フィールドは、この目的を達成するために特定の構文を必要とします：

values(<object or array>)[?<fieldName>] [| [<min>:<max>]]

具体的には、この構文はJMESPath Expressionsのサブセットです。

構文の詳細と説明：

必須
values(<object or array>)

反復処理したいObjectまたはArrayを定義します。
➞ 値のArrayを出力します
必須
[?<fieldName>]

フィルタ：値を反復処理し、フィルタ式を満たすものだけを選択します。
➞ フィルタされた値のArrayを出力します
オプション
[<min>:<max>]

反復処理するインデックスの範囲を定義します。
例：[0:1]は最初のものだけを選択します。
➞ さらにフィルタされた値のArrayを出力します。

この構文は、特定のフィルタに一致する値を抽出することを可能にし、その結果は値の配列になります。

iterable contextの主な目的は、上記の評価の結果を使用できるようにすることです。テンプレートは、フィルタされたサブセット内のアイテムの数だけ実行されます。

重要な注意点
<object or array>は、補間コンテキストから参照されます。各実行のために、補間コンテキストには反復処理される値に解決される“$”変数が注入されます。

例：Page Eventテンプレート

次の入力を使用してPageEventテンプレートが作成されると仮定します：

Iterable Context 
values(window.example)[?key] | [1:2]
 
EventName
 
Value: ${$.value}
 


values(window.example)
 
[
 { key: one, value: 5 }, 
 { value: 4}, 
 { key: two, value: 3}
]
 
[?key]
 
[
 { key: one, value: 5 }, 
 { key: two, value: 3}
]
 
[1:2]
 
[
 { key: two, value: 3}
]

Page Eventテンプレートは一度だけ実行され、$.valueは3に補間されます。

例：Google Tag Manager (GTM) DataLayer

この場合、GTM DataLayer内にあるwindow.dataLayer[i].google_tag_params.make の値を取得したいと思います（これはオブジェクトの配列です）。

cstc - gtm data layer - feb'25.png

これは、Iterable Contextを使用して探しているデータを取得できる典型的な例です。

dataLayerはオブジェクトの配列であり、それぞれ異なるデータポイントと情報を含んでいます。

よく見ると、インデックス11と12のアイテムにはgoogle_tag_paramsフィールドがあるようです。

ステップ 1: 最初のステップは、google_tag_paramsキーを含むオブジェクトのみをdataLayerからフィルタリングすることです。これは次の式を使用して行います。

values(window.dataLayer)[?google_tag_params]

___

cstc-datalayer-filtered-feb'25.png

ステップ 2: フィルタリングが適用された後、2つのオブジェクトが返されます。ただし、私たちは2つ目のオブジェクトの値に興味があります。したがって、単一のオブジェクトに絞り込むために、式の最後に| [1:2]部分を追加します。

values(window.dataLayer)[?google_tag_params] | [1:2]

___

cstc-gtm-datalayer-filtered-feb'25.png

ステップ 3: 最終的に、収集したい値/プロパティを持つキー/オブジェクトを特定した後、次の補間構文を使用してアクセスできます（スニペットの値フィールド内）：

${$.google_tag_params.make}

___

cstc-customvariable-template-interpolation.png

上記の例のように、Iterable Contextは適切な構文で埋められ、値入力テキストはIterable Contextによって提供される値を収集するために補間を使用しています。

トップに戻る

スニペットの作成、管理、展開方法

まず、プロフィールアイコン（右上）をクリックして「タグコンフィグレーター」に移動します。

CSTCでスニペットを作成および管理するためのワークフローは次のとおりです：

ステップ 1: スニペットを作成（または編集）する

1. ‘+ 新しいスニペット’を選択します。

2. スニペットに名前を付けます（その機能を説明するような名前）。

3. 選択したテンプレートを選択します。

4. 利用可能なトリガーの1つを選択します（トリガーはテンプレートごとに異なります）。

5. ‘保存’をクリックします。

ステップ 2: スニペットを展開する

スニペットを展開するには、タグの新しいバージョンを公開し、新しいまたは既存のスニペットへのすべての変更を含める必要があります。

1. 必要に応じてスニペットの‘公開ステータス’を確認し、更新します。

  • ‘オン’: これらは公開時にタグに展開されます。新しく作成されたスニペットはデフォルトで‘オン’に設定されています。
  • ‘オフ’: これらは公開時にタグから無効になります。

2. ‘変更を公開する [x]’ ボタンをクリックします。変更を承認して公開するために、登録されたメールアドレスに4桁のコードが含まれたメールが送信されます。

3. 表示された新しいウィンドウに、メールで受け取ったコードを入力して変更を承認します。

4. ‘すべてのスニペットを公開する’ をクリックすると、新しいタグが展開され、すべてのスニペットと行った変更が含まれます。

ステップ 3: 実装をテストする

1. Contentsquare Tracking Setup Assistant Chrome 拡張機能をダウンロードします。

2. 5分待ち、ブラウザのキャッシュをクリアし、新しく作成したスニペットが発火するはずのページを開く（または再読み込みする）します。

3. 公開されたスニペットが発火するはずのウェブサイト（またはウェブサイトの特定のページ）に移動し、公開されたスニペットが発火するアクションを実行します。

4. Contentsquare Tracking Setup Assistant 拡張機能を開き、最後の「新しいページビューが送信されました」セクションの下で、カスタム/ダイナミック変数またはページイベントが正常に収集されたかどうかを確認します。

スニペットのマスキング/マスキング解除は、Contentsquare プラットフォーム内で確認する必要があります。

スニペットの有効化/無効化

公開状況の下にあるトグルを使用して、スニペットを有効化および無効化できます：

‘オン’: スニペットを有効にします。

‘オフ’: スニペットを無効にします。これは、スニペットをプロジェクトから完全に削除することなく、一時的に無効にしたい場合に使用します（それにはスニペットを削除する必要があります）。

変更を展開するには、常に変更を公開する必要があります。

スニペットを削除する

重要: 特にマスキングに関連するスニペットを削除する前には、慎重に行動し、その影響を確認する必要があります（例えば、マスキングの場合に個人データが露出するなど）。

スニペットを永久に削除し、CSTC（あなたのContentsquareプロジェクトを含む）から削除するには、スニペットの隣にある3点メニューをクリックし、「削除」をクリックします。これは元に戻せませんのでご注意ください。

よくある質問

CSTCはモバイルアプリで利用できますか？

CSTCは現在、WebViewsで利用可能です。タグがWebviewsにも読み込まれている限りです。

タグの種類とカスタムコード: M2Pおよび「標準」

すでにカスタムコードがある場合、CSTCスニペットはそれを置き換えません。つまり、例えば、カスタムコードで人工ページビューを設定している場合、CSTCで人工ページビューのスニペットを作成すると、ページビューが重複します。

バージョン変更を確認したり、CSTCで行った変更を元に戻したりできますか？

現在、バージョンログや元に戻す機能はないため、必要に応じてスニペットを再構成し、再度変更を公開してタグに展開する必要があります。

サイトで問題を作成した場合や、個人データ漏洩の懸念がある場合はどうすればよいですか？

問題を引き起こしたスニペットを無効にして公開を解除し、個人データの漏洩が発生した場合は、サポートチームに連絡する必要があります。

カスタムJavasciptを使用できますか？

補間コンテキスト内では、許可されたメソッドと関数のみを使用できます。

トップに戻る