計測タグ

計測タグの確認

左メニュー上部のプロジェクト名をクリック
開いたポップアップメニュー内のプロジェクト名の右にある歯車マークをクリック
遷移した設定画面内の「計測タグ」をクリック

計測タグの設置

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

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

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

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

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

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

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

イベント送信設定

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

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

設置後の確認方法

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

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

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

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

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

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

数字が反映されない場合

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

計測するデータの拡張

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

方法

概要

ユーザープロファイルの設定

ユーザー単位で任意のユーザー属性データを紐づけられます

カスタムイベント

自動計測では取得できない任意のデータを任意のタイミングで送信できます

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

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

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

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

Content Security Policyについて

セキュリティ対策でサイトに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設定によって、実際の変更内容は異なります。

前へアカウント作成次へユーザープロファイルの設定

最終更新 7 日前

役に立ちましたか？