# ClarityをGTM（Google Tag Manager）経由で導入する方法

ClarityはMicrosoftが提供するWeb解析ツールで、ユーザーの行動を追跡し、ヒートマップやセッションリプレイなどを通じてWebサイトのインタラクションを分析します。このツールをGTM（Google Tag Manager）を使ってサイトに導入する方法を解説します。

## 目次

1. Clarityとは
2. GTM（Google Tag Manager）の基本
3. Clarityのアカウント作成とプロパティ設定
4. GTMでのタグ設定
5. Clarityコードのインストール
6. GTMでのトリガー設定
7. 実装の確認
8. まとめ

## 1. Clarityとは

1-1. 概要  
Clarityは、ウェブサイトのユーザーインタラクションを視覚化し、問題点や改善の機会を明確にするツールです。主な機能としてヒートマップ、セッションリプレイがあります。

1-2. 機能の詳細  
- **ヒートマップ**: ページのどの部分が最も頻繁にクリックされたのかを視覚的に示します。
- **セッションリプレイ**: ユーザーがページでどのように移動したかを再生できます。

## 2. GTM（Google Tag Manager）の基本

2-1. GTMの紹介  
GTMは、ウェブサイトのタグ（JavaScriptなど）を一元管理できるツールで、ページのコードに直接触れることなくタグを管理できます。

2-2. GTMを利用するメリット  
- **柔軟な管理**: 複数のタグをGTMで管理し、迅速かつ容易に更新できます。
- **テスト環境**: 変更を実施する前に、テストが可能です。

## 3. Clarityのアカウント作成とプロパティ設定

3-1. アカウント作成  
まず、ClarityのWebサイト（https://clarity.microsoft.com/）でアカウントを作成します。

3-2. プロパティ設定  
- プロジェクトを新規作成し、ウェブサイトのURLを入力します。
- Clarityが生成するトラッキングコードが表示されます。

## 4. GTMでのタグ設定

4-1. GTMで新しいタグを作成  
GTMのワークスペースにログインし、「タグ」タブから「新規タグ」を作成します。

4-2. タグタイプの選択  
- タグのタイプは「カスタムHTMLタグ」を選択します。

4-3. Clarityコードの追加  
Clarityが提供するトラッキングコードをカスタムHTMLタグにそのままコピー＆ペーストして追加します。

![img](/mosaic-code.jpg)

## 5. Clarityコードのインストール

5-1. コードの確認  
Clarity IDを確認し、正しく入力されていることを確認します。

5-2. タグの保存  
タグ設定が完了したら、保存します。

## 6. GTMでのトリガー設定

6-1. トリガーの選択  
- 「すべてのページ」トリガーを選択して、すべてのページにClarityコードを適用します。

6-2. トリガーの設定完了  
- トリガーを設定し、保存します。

## 7. 実装の確認

7-1. プレビュー状態で確認  
GTMのプレビューモードを用いて、サイトにタグが正しくインストールされているか確認します。

7-2. Clarityダッシュボードの確認  
- Clarityの管理ダッシュボードでデータが集計されていることを確認します。

## 8. まとめ

ClarityをGTM経由で導入することで、ユーザービヘイビアを詳細に把握することができます。GTMを使用することで、サイトコードに直接変更を加えることなくタグ管理が容易になり、迅速にデータの収集と分析を開始できます。このガイドに従い、効率的なウェブ解析の実装を補助することを期待しています。 [cv:issue_marketplace_engineer]

# ClarityをGTM（Google Tag Manager）経由で導入する方法

ClarityはMicrosoftが提供するWeb解析ツールで、ユーザーの行動を追跡し、ヒートマップやセッションリプレイなどを通じてWebサイトのインタラクションを分析します。このツールをGTM（Google Tag Manager）を使ってサイトに導入する方法を解説します。

## 目次

1. Clarityとは
2. GTM（Google Tag Manager）の基本
3. Clarityのアカウント作成とプロパティ設定
4. GTMでのタグ設定
5. Clarityコードのインストール
6. GTMでのトリガー設定
7. 実装の確認
8. まとめ

## 1. Clarityとは

1-1. 概要  
Clarityは、ウェブサイトのユーザーインタラクションを視覚化し、問題点や改善の機会を明確にするツールです。主な機能としてヒートマップ、セッションリプレイがあります。

1-2. 機能の詳細  
- **ヒートマップ**: ページのどの部分が最も頻繁にクリックされたのかを視覚的に示します。
- **セッションリプレイ**: ユーザーがページでどのように移動したかを再生できます。

## 2. GTM（Google Tag Manager）の基本

2-1. GTMの紹介  
GTMは、ウェブサイトのタグ（JavaScriptなど）を一元管理できるツールで、ページのコードに直接触れることなくタグを管理できます。

2-2. GTMを利用するメリット  
- **柔軟な管理**: 複数のタグをGTMで管理し、迅速かつ容易に更新できます。
- **テスト環境**: 変更を実施する前に、テストが可能です。

## 3. Clarityのアカウント作成とプロパティ設定

3-1. アカウント作成  
まず、ClarityのWebサイト（https://clarity.microsoft.com/）でアカウントを作成します。

3-2. プロパティ設定  
- プロジェクトを新規作成し、ウェブサイトのURLを入力します。
- Clarityが生成するトラッキングコードが表示されます。

## 4. GTMでのタグ設定

4-1. GTMで新しいタグを作成  
GTMのワークスペースにログインし、「タグ」タブから「新規タグ」を作成します。

4-2. タグタイプの選択  
- タグのタイプは「カスタムHTMLタグ」を選択します。

4-3. Clarityコードの追加  
Clarityが提供するトラッキングコードをカスタムHTMLタグにそのままコピー＆ペーストして追加します。

```html

<script type="text/javascript">
  (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "YOUR_CLARITY_ID");
</script>
```

## 5. Clarityコードのインストール

5-1. コードの確認  
Clarity IDを確認し、正しく入力されていることを確認します。

5-2. タグの保存  
タグ設定が完了したら、保存します。

## 6. GTMでのトリガー設定

6-1. トリガーの選択  
- 「すべてのページ」トリガーを選択して、すべてのページにClarityコードを適用します。

6-2. トリガーの設定完了  
- トリガーを設定し、保存します。

## 7. 実装の確認

7-1. プレビュー状態で確認  
GTMのプレビューモードを用いて、サイトにタグが正しくインストールされているか確認します。

7-2. Clarityダッシュボードの確認  
- Clarityの管理ダッシュボードでデータが集計されていることを確認します。

## 8. まとめ

ClarityをGTM経由で導入することで、ユーザービヘイビアを詳細に把握することができます。GTMを使用することで、サイトコードに直接変更を加えることなくタグ管理が容易になり、迅速にデータの収集と分析を開始できます。このガイドに従い、効率的なウェブ解析の実装を補助することを期待しています。 [![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

ClarityをGTM（Google Tag Manager）経由で導入する方法

目次

続きは、単価診断を受けたエンジニア限定で公開中（30秒）

続きは、
単価診断を受けたエンジニア限定で公開中（30秒）