# 計測タグ

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

## 計測タグの設置

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

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

{% tabs %}
{% tab title="HTML" %}

```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>
```

{% endtab %}

{% tab title="React" %}

```html
<!-- 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>

```

{% endtab %}

{% tab title="Vue" %}

```html
// 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>

```

{% endtab %}

{% tab title="Next.js" %}

```javascript
// 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>
  );
}

```

{% endtab %}

{% tab title="Nuxt" %}

```javascript
// 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,
      },
    ],
  })
})
```

{% endtab %}

{% tab title="GTM" %}

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

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

   <figure><img src="/files/kqVGUqRD54KFfNdDNnoX" alt=""><figcaption></figcaption></figure>
3. **GTMアカウントとコンテナの選択**\
   GTMのアカウントとコンテナを選択してください。\
   `GTMアカウントを選択し、Wicleタグを設定`ボタンを押すと、WicleはGTM APIを通じて分析に必要なタグの情報をコンテナに追加します。

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

   <figure><img src="/files/SkA5T5zvyO11VqvPnwmL" alt=""><figcaption></figcaption></figure>
4. **ワークスペースへの反映**\
   設定はワークスペースに「下書き」として登録されます。`GTM管理画面で公開`ボタンでGTMに遷移し、問題なければ「公開」ボタンを押してタグの設置を完了してください。<br>

   <figure><img src="/files/u2JhcCGIw9RBfVNt1X09" alt=""><figcaption></figcaption></figure>

{% endtab %}

{% tab title="GTM（手動）" %}

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

   <figure><img src="/files/wkdlroFteFpVmohqChEL" alt=""><figcaption></figcaption></figure>
2. タグ種別としてカスタムHTMLを選択

   <figure><img src="/files/TjcvLAp4d60Z49mDADym" alt=""><figcaption></figcaption></figure>
3. Wicle管理画面でコピーしたタグを貼り付ける

   <figure><img src="/files/oiUgsc727BD70VmVQ3bg" alt=""><figcaption></figcaption></figure>
4. トリガーには「All Pages」を指定して、保存ボタンをクリックする

   <figure><img src="/files/vrU4U1ZpSCF57XHIk3bu" alt=""><figcaption></figcaption></figure>
5. サブミットボタンから本番環境への適用を行う

   <figure><img src="/files/HkjF82hjAytEBxY0ZAgC" alt=""><figcaption></figcaption></figure>

{% endtab %}

{% tab title="Wordpress" %}

1. Wordpressの管理画面を開き、「プラグイン」 → 「プラグインを追加」を選択
2. タグを埋め込む機能を持った任意のプラグインを追加する
   1. 例として、今回は「Insert Headers And Footers」を利用する

      <figure><img src="/files/pey8TV2hbhLAU4SDbpDA" alt=""><figcaption></figcaption></figure>
3. インストールし、有効化する

   <figure><img src="/files/coL8OXZ7fq0pG7FRUDeK" alt=""><figcaption></figcaption></figure>
4. プラグインの設定画面でタグを貼り付ける

   <figure><img src="/files/YObIIRhUeWZpLE9VdKxu" alt=""><figcaption></figcaption></figure>
5. 保存ボタンをクリック
   {% endtab %}
   {% endtabs %}

## イベント送信設定

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

* 自動計測するイベント
  * デフォルトで計測されている「ページビュー」、「クリック」、「滞在時間」に加えて「スクロール」、「注視領域」「フォーム送信」、「エラー」をオプトインで[自動計測イベント](https://docs.wicle.io/data-setting/spec/auto-event)として追加することができます。
  * 追加したイベントは課金対象イベントとしてカウントされます。
* イベントごとの計測対象URL・除外URL
  * 各イベント種別（クリック・スクロール・フォーム送信・エラー・注視領域）ごとに、計測対象とするURLや除外するURLを指定できます。
  * 詳しくは[イベントごとの計測対象URL設定](#event-url-conditions)をご覧ください。
* クリック計測　追加対象セレクタ
  * クリックイベントで自動計測の対象外となっている要素について、CSSセレクターを指定することで、該当するDOM要素を計測対象に追加できます。
  * 設定画面では入力したCSSセレクタが計測対象になるかをチェックする機能も提供しています。
* スクロール計測　閾値タイプ
  * スクロール計測の閾値タイプを選択することでイベントを送信する間隔を調整できます。

## 設置後の確認方法 <a href="#verification" id="verification"></a>

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

設置が完了したら[スタートガイド](https://app.wicle.io/gettingStarted)の計測タグの設置からデータが発生していることを確認してください。

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

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

<figure><img src="/files/fYdZgwbnoI7uB34iI639" alt=""><figcaption></figcaption></figure>

<details>

<summary>データの更新間隔について</summary>

送信されたイベントデータは **30-60分毎** に集計処理し管理画面上に反映されます。すぐには管理画面に反映されませんのでご注意ください。

</details>

<details>

<summary>数字が反映されない場合</summary>

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

</details>

## 計測するデータの拡張

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

<table><thead><tr><th width="244">方法</th><th>概要</th></tr></thead><tbody><tr><td><a data-mention href="/pages/MBjRU3TYzvhHLvd9km48">/pages/MBjRU3TYzvhHLvd9km48</a></td><td>ユーザー単位で任意のユーザー属性データを紐づけられます</td></tr><tr><td><a data-mention href="/pages/H3F1XjYzFuLttAZa8akf">/pages/H3F1XjYzFuLttAZa8akf</a></td><td>自動計測では取得できない任意のデータを任意のタイミングで送信できます</td></tr></tbody></table>

## 計測タグの重複設置について <a href="#tag-conflict" id="tag-conflict"></a>

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

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

[タグ設定画面](https://app.wicle.io/settings/mesurement-tag) のタグ設置確認からタグ設置先ページのURLを入力しチェックすることで、既にタグが設置されているか確認することができます。

<figure><img src="/files/Vlr1HKl3GqNaCZGzqjNs" alt=""><figcaption></figcaption></figure>

## 計測対象ドメインの制限 <a href="#domain-validation" id="domain-validation"></a>

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

### 設定方法 <a href="#domain-validation-setup" id="domain-validation-setup"></a>

[タグ設定画面](https://app.wicle.io/settings/mesurement-tag) の `計測対象ドメイン設定` から行います。

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

### 一致方式 <a href="#domain-validation-match-type" id="domain-validation-match-type"></a>

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

{% hint style="info" %}
登録できるドメインは最大10件、各パターンは100文字以内です。
{% endhint %}

{% hint style="warning" %}

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

## イベントごとの計測対象URL設定 <a href="#event-url-conditions" id="event-url-conditions"></a>

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

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

### 設定方法 <a href="#event-url-conditions-setup" id="event-url-conditions-setup"></a>

[計測タグ設定画面](https://app.wicle.io/settings/mesurement-tag) の `イベント送信設定` から行います。

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

### 計測対象URLと除外URL <a href="#event-url-conditions-target-excluded" id="event-url-conditions-target-excluded"></a>

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

### 一致方式 <a href="#event-url-conditions-match-type" id="event-url-conditions-match-type"></a>

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

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

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

### URLチェック機能 <a href="#event-url-conditions-check" id="event-url-conditions-check"></a>

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

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

{% hint style="warning" %}

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

## Content Security Policyについて <a href="#content-security-policy" id="content-security-policy"></a>

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

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

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wicle.io/initial-setting/tag.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
