計測タグ

初めてタグを設置する場合は、管理画面の初期設定画面からステップに沿って進めることができます。初期設定画面では、タグコードの確認・コピーに加え、設置後の計測状況をリアルタイムで確認できます。

計測タグの設置

「計測タグ」画面にあるタグをコピーし、計測したいサイトに設置します。

設置する場所は</head>タグの直前を推奨しています。難しい場合は<body>タグのなるべく上の方に設置してください。

HTML

<html>
  <head>
    <title>サンプルページ</title>
    <!-- Start KARTE Tag -->
    <script>!function(n){if(!window[n]){var o=window[n]=function(){var n=[].slice.call(arguments);return o.x?o.x.apply(0,n):o.q.push(n)};o.q=[],o.i=Date.now(),o.allow=function(){o.o="allow"},o.deny=function(){o.o="deny"}}}("krt")</script>
    <script async src="https://cdn-edge.karte.io/xxxxxxxxxxxxxxxxxxxxxxx/edge.js"></script>
    <!-- End KARTE Tag -->
  </head>
  <body>
    この部分はページの本文です
  </body>
</html>

React

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    ...
    <!-- Start KARTE Tag -->
    <script>!function(n){if(!window[n]){var o=window[n]=function(){var n=[].slice.call(arguments);return o.x?o.x.apply(0,n):o.q.push(n)};o.q=[],o.i=Date.now(),o.allow=function(){o.o="allow"},o.deny=function(){o.o="deny"}}}("krt")</script>
    <script async src="https://cdn-edge.karte.io/xxxxxxxxxxxxxxxxxxxxxxx/edge.js"></script>
    <!-- End KARTE Tag -->
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Vue

// index.html
<!doctype html>
<html lang="en">
  <head>
    ...
    <!-- Start KARTE Tag -->
    <script>!function(n){if(!window[n]){var o=window[n]=function(){var n=[].slice.call(arguments);return o.x?o.x.apply(0,n):o.q.push(n)};o.q=[],o.i=Date.now(),o.allow=function(){o.o="allow"},o.deny=function(){o.o="deny"}}}("krt")</script>
    <script async src="https://cdn-edge.karte.io/xxxxxxxxxxxxxxxxxxxxxxx/edge.js"></script>
    <!-- End KARTE Tag -->
    <title>Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Next.js

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <Script id="wicle-init">
          {!function(n){if(!window[n]){var o=window[n]=function(){var n=[].slice.call(arguments);return o.x?o.x.apply(0,n):o.q.push(n)};o.q=[],o.i=Date.now(),o.allow=function(){o.o="allow"},o.deny=function(){o.o="deny"}}}("krt")}
        </Script>
        <Script
          async
          src="https://cdn-edge.karte.io/xxxxxxxxxxxxxxxxxxxxxxx/edge.js"
        />
        {children}
      </body>
    </html>
  );
}

Nuxt

// app/plugins/wicle.client.ts
export default defineNuxtPlugin(() => {
  useHead({
    script: [
      {
        innerHTML: `!function(n){if(!window[n]){var o=window[n]=function(){var n=[].slice.call(arguments);return o.x?o.x.apply(0,n):o.q.push(n)};o.q=[],o.i=Date.now(),o.allow=function(){o.o="allow"},o.deny=function(){o.o="deny"}}}("krt")`,
      },
      {
        src: 'https://cdn-edge.karte.io/xxxxxxxxxxxxxxxxxxxxxxx/edge.js',
        async: true,
      },
    ],
  })
})

GTM

1. 連携タグ設定画面を開く

   設定画面からGoogle Tag Manager連携を行います。
2. Googleアカウントの認証を行う WicleがあなたのGoogleアカウントに接続し、Google Tag Managerコンテナを編集するためのアクセス許可を与えます。連携を許可したいGoogleアカウントを選択してください。

   
3. GTMアカウントとコンテナの選択 GTMのアカウントとコンテナを選択してください。 GTMアカウントを選択し、Wicleタグを設定ボタンを押すと、WicleはGTM APIを通じて分析に必要なタグの情報をコンテナに追加します。

   ※GTMのアカウント作成直後の場合は反映に時間がかかる場合がございます。

   
4. ワークスペースへの反映 設定はワークスペースに「下書き」として登録されます。GTM管理画面で公開ボタンでGTMに遷移し、問題なければ「公開」ボタンを押してタグの設置を完了してください。

   

GTM（手動）

1. 手動Google Tag Managerの管理画面から新規タグ設定を追加する

   
2. タグ種別としてカスタムHTMLを選択

   
3. Wicle管理画面でコピーしたタグを貼り付ける

   
4. トリガーには「All Pages」を指定して、保存ボタンをクリックする

   
5. サブミットボタンから本番環境への適用を行う

   

Wordpress

1. Wordpressの管理画面を開き、「プラグイン」 → 「プラグインを追加」を選択
2. タグを埋め込む機能を持った任意のプラグインを追加する

   1. 例として、今回は「Insert Headers And Footers」を利用する

      
3. インストールし、有効化する

   
4. プラグインの設定画面でタグを貼り付ける

   
5. 保存ボタンをクリック

イベント送信設定

イベントの各種設定を行います。

• 自動計測するイベント

  • デフォルトで計測されている「ページビュー」、「クリック」、「滞在時間」に加えて「スクロール」、「注視領域」「フォーム送信」、「エラー」をオプトインで自動計測イベントとして追加することができます。
  • 追加したイベントは課金対象イベントとしてカウントされます。
  • 無効化しても計測が停止するだけで、それまでに取得した既存データは保持されます。
• イベントごとの計測対象URL・除外URL

  • 各イベント種別（クリック・スクロール・フォーム送信・エラー・注視領域）ごとに、計測対象とするURLや除外するURLを指定できます。
  • 詳しくはイベントごとの計測対象URL設定をご覧ください。
• クリック計測　追加対象セレクタ

  • クリックイベントで自動計測の対象外となっている要素について、CSSセレクターを指定することで、該当するDOM要素を計測対象に追加できます。
  • 設定画面では入力したCSSセレクタが計測対象になるかをチェックする機能も提供しています。
• スクロール計測　閾値タイプ

  • スクロール計測の閾値タイプを選択することでイベントを送信する間隔を調整できます。

設置後の確認方法

Chrome拡張を使用し、タグが正常に設置されイベント送信が行われているかをすぐに確認することが可能です。詳細はタグ埋め込み後のイベント確認方法 をご覧ください。

設置が完了したらスタートガイドの計測タグの設置からデータが発生していることを確認してください。

実際のイベント計測からデータが反映されるまで数十分程度かかる場合があるため、設置確認ができない場合は時間をおいてお試しください

確認ができたら直近7日間でアクセスしたユーザー、クリックされたa要素から計測されたユーザーがいるか確認しましょう。

データの更新間隔について

送信されたイベントデータは、通常 20〜30分程度 で集計され管理画面に反映されます。すぐには反映されませんのでご注意ください。

数字が反映されない場合

イベントが正常に送信されているか、 「タグ埋め込み後のイベント確認方法」をもとに確認してみましょう。解決しない場合はチャットでお問い合わせください。

計測するデータの拡張

以下の方法で計測するデータを拡張できます。詳細はそれぞれのページをご覧ください。

方法	概要
ユーザープロファイル	ユーザー単位で任意のユーザー属性データを紐づけられます
カスタムイベント	自動計測では取得できない任意のデータを任意のタイミングで送信できます

計測タグの重複設置について

Wicleの別プロジェクトのタグや弊社プロダクトの「KARTE」のタグが既に設置されている場合、タグが競合し計測に問題が生じる場合があります。

原則として、1つのサイトには1つの計測タグの設置を推奨しております。 特殊な事情等により複数タグの設置を行いたい場合は、サポートまでお問い合わせください。

GA4など他社の解析ツールのタグと同時に設置しても問題ありません（重複設置の注意は、Wicleの別プロジェクトやKARTEのタグとの競合を指します）。

タグ設定画面 のタグ設置確認からタグ設置先ページのURLを入力しチェックすることで、既にタグが設置されているか確認することができます。

計測対象ドメインの制限

計測タグが設置されたドメインのうち、指定したドメインでのみ計測を行うように制限できます。サイト構成上、計測タグの個別制御が難しい場合や、意図しないドメインからのイベント計測によりデータの正確性が損なわれることを防ぎたい場合に利用してください。

設定方法

タグ設定画面 の 計測対象ドメイン設定 から行います。

1. 計測対象ドメインの制限を有効化 のチェックを入れます
2. ドメインを追加 ボタンから対象ドメインのパターンと一致方式を指定します
3. 保存 をクリックして設定を反映します

一致方式

一致方式	入力例	計測されるドメインの例
完全一致	example.com	example.com のみ
前方一致	shop.example.	shop.example.com / shop.example.jp など
後方一致	.example.com	www.example.com / blog.example.com など

登録できるドメインは最大10件、各パターンは100文字以内です。

• 設定の変更は組織のowner権限を持つメンバーのみ可能です。
• 制限を無効化して保存すると、登録済みのドメインリストはクリアされ、すべてのドメインで計測されるようになります。

イベントごとの計測対象URL設定

各自動計測イベント（クリック・スクロール・フォーム送信・エラー・注視領域）について、計測対象とするURLパターンや除外するURLパターンを指定できます。

特定のページでのみイベントを計測したい場合や、管理画面など特定のURLでの計測を除外したい場合に利用してください。

設定方法

計測タグ設定画面 の イベント送信設定 から行います。

1. 対象のイベント種別を有効化します
2. 計測対象URL または 除外URL の URLを追加 ボタンから、URLパターンと一致方式を指定します
3. 保存 をクリックして設定を反映します

計測対象URLと除外URL

• 計測対象URL: ここで指定したURLのみ計測します。空の場合は全ページを対象とします。
• 除外URL: ここで指定したURLは計測しません。対象URL設定より優先されます。

一致方式

一致方式	説明	入力例	計測されるURLの例
完全一致	ホスト名+パスが完全に一致	wicle.io/a/b/c	https://wicle.io/a/b/c のみ
前方一致	ホスト名+パスが指定値で始まる	app.wicle.io/	https://app.wicle.io/ 配下すべて
後方一致	ホスト名+パスが指定値で終わる	.html	末尾が .html のページすべて
部分一致	ホスト名+パスに指定値を含む	/products	パスに /products を含むページすべて

評価対象は「ホスト名 + パス」のみです。プロトコル（https://）、クエリ文字列（?以降）、ハッシュ（#以降）は判定対象外となります。

例: https://app.wicle.io/dashboard?tab=overview#section1 → 評価対象は app.wicle.io/dashboard

URLチェック機能

設定画面の URLで計測対象になるかチェック 欄にURLを入力すると、現在の設定で各イベントが計測されるかをリアルタイムで確認できます。

登録できるURLパターンは各イベントの「対象URL」「除外URL」それぞれ最大10件、各パターンは200文字以内です。

• 設定の変更は組織のowner権限を持つメンバーのみ可能です。
• イベントを無効化していても、URL条件にエラーがあると保存できません。展開して修正してください。

Content Security Policyについて

セキュリティ対策でサイトにContent Security Policy(CSP)が設定されている場合、サイトに設置した計測タグが正常に動作しないことがあります。

その場合、以下を参考にCSP設定を変更してください。

• script-src に unsafe-eval と *.karte.io *.wicle.io を追加
• connect-src に *.karte.io *.wicle.io を追加
• style-src に unsafe-inline と *.karte.io *.wicle.io を追加
• img-src に *.karte.io *.wicle.io を追加

※Webサイト側の既存のCSP設定によって、実際の変更内容は異なります。