# 計測タグ

{% 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="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2FL67eJxj1knuntGT2DhMV%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-11-25%2011.20.28.png?alt=media&#x26;token=48cf44c9-a428-4d07-b385-78cea6d6325b" alt=""><figcaption></figcaption></figure>
3. **GTMアカウントとコンテナの選択**\
   GTMのアカウントとコンテナを選択してください。\
   `GTMアカウントを選択し、Wicleタグを設定`ボタンを押すと、WicleはGTM APIを通じて分析に必要なタグの情報をコンテナに追加します。

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

   <figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2FPl1iE4wC7c97YgBcI6p3%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-11-25%2011.13.41.png?alt=media&#x26;token=4b0abb72-1716-4d62-8a70-ef1017ffc515" alt=""><figcaption></figcaption></figure>
4. **ワークスペースへの反映**\
   設定はワークスペースに「下書き」として登録されます。`GTM管理画面で公開`ボタンでGTMに遷移し、問題なければ「公開」ボタンを押してタグの設置を完了してください。<br>

   <figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2FojxiVBbT7R7hfTkTXZs7%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-11-25%2011.30.15.png?alt=media&#x26;token=c6b94a63-f1dd-4867-9b99-39a4ac20dc8e" alt=""><figcaption></figcaption></figure>

{% endtab %}

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

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

   <figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2FgZx6JCfoR6UTdcVLhLzf%2Fimage.png?alt=media&#x26;token=385aafa4-1114-4c30-be43-75c95cb424d9" alt=""><figcaption></figcaption></figure>
2. タグ種別としてカスタムHTMLを選択

   <figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2FPHoTCOOxCQlJjN6SMbGl%2Fimage.png?alt=media&#x26;token=37d4eab7-23bf-46cd-9eee-b0cb1c64eaac" alt=""><figcaption></figcaption></figure>
3. Wicle管理画面でコピーしたタグを貼り付ける

   <figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2FNEMYyDJ07jRrEkotsv5t%2Fgtm3.png?alt=media&#x26;token=b6c617e6-93b6-4886-b03c-5b9b264f03c1" alt=""><figcaption></figcaption></figure>
4. トリガーには「All Pages」を指定して、保存ボタンをクリックする

   <figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2F0UTapabgwAmBZTxY5maY%2Fgtm4.png?alt=media&#x26;token=9470f823-d932-480b-bf94-756bb4abf043" alt=""><figcaption></figcaption></figure>
5. サブミットボタンから本番環境への適用を行う

   <figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2FkNpLhYmKwKr62B4c3ztS%2Fimage.png?alt=media&#x26;token=30378e95-5253-43ee-8359-d65919cc052b" alt=""><figcaption></figcaption></figure>

{% endtab %}

{% tab title="Wordpress" %}

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

      <figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2FgTaT0vEWMyNyQzqcfynx%2Fimage.png?alt=media&#x26;token=bbb936b3-312e-4620-aa1e-d777c357a12a" alt=""><figcaption></figcaption></figure>
3. インストールし、有効化する

   <figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2FWDO0eUu340XPSBAzAuVw%2Fwp2.png?alt=media&#x26;token=e9f67cae-ab5c-4d1e-a3f7-3be20b0a8a90" alt=""><figcaption></figcaption></figure>
4. プラグインの設定画面でタグを貼り付ける

   <figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2FBuTUOGQUJCfoH6VPTxr7%2Fwp3.png?alt=media&#x26;token=09798bdb-31a4-47d9-925d-2bd2f8df38e2" alt=""><figcaption></figcaption></figure>
5. 保存ボタンをクリック
   {% endtab %}
   {% endtabs %}

## イベント送信設定

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

* 自動計測するイベント
  * デフォルトで計測されている「ページビュー」、「クリック」、「滞在時間」に加えて「スクロール」、「注視領域」「フォーム送信」、「エラー」をオプトインで[自動計測イベント](https://docs.wicle.io/data-setting/spec/auto-event)として追加することができます。
  * 追加したイベントは課金対象イベントとしてカウントされます。
* クリック計測　追加対象セレクタ
  * クリックイベントで自動計測の対象外となっている要素について、CSSセレクターを指定することで、該当するDOM要素を計測対象に追加できます。
* スクロール計測　閾値タイプ
  * スクロール計測の閾値タイプを選択することでイベントを送信する間隔を調整できます。

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

Chrome拡張を使用し、タグが正常に設置されイベント送信が行われているかをすぐに確認することが可能です。詳細は[debug-event](https://docs.wicle.io/data-setting/event-tracking/debug-event "mention") をご覧ください。

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

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

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

<figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2F4Fth7NBffmNItBVpodhk%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-07-30%2013.02.52.png?alt=media&#x26;token=0c58b019-ff52-45ab-9490-802d938d5ebb" alt=""><figcaption></figcaption></figure>

<details>

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

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

</details>

<details>

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

イベントが正常に送信されているか、 「[debug-event](https://docs.wicle.io/data-setting/event-tracking/debug-event "mention")」をもとに確認してみましょう。解決しない場合はチャットでお問い合わせください。

</details>

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

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

<table><thead><tr><th width="244">方法</th><th>概要</th></tr></thead><tbody><tr><td><a data-mention href="../data-extension/user-profile">user-profile</a></td><td>ユーザー単位で任意のユーザー属性データを紐づけられます</td></tr><tr><td><a data-mention href="../data-extension/custom-event">custom-event</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="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2FSb1bo89QKchucdRFjVHY%2Fimage.png?alt=media&#x26;token=f8c887c1-3fca-4050-853c-7f68b91ad723" alt=""><figcaption></figcaption></figure>

## 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設定によって、実際の変更内容は異なります。
