2022年 2月 の投稿一覧

GoogleタグマネージャーをWordPressに設置する

GoogleタグマネージャーをWordPressへ設置するメインビジュアル

WordPressにGoogleタグマネージャーを設置するには、テーマを編集して行います。本ページではWordPressへのGoogleタグマネージャーの設置方法を具体的に紹介致します。

事前準備

WordPressにGoogleタグマネージャーを設置するには、先ずGoogleタグマネージャーの管理画面で以下の様なコードを取得する必要があります。

未だ取得していない場合は、GoogleタグマネージャーをWebサイトに設置する方法を参考に用意しましょう。このコードを得たら次の手順に進みます。

googleタグマネージャーのコンテナコードの画像

テーマを編集する

Googleタグマネージャーのコードを得たら、WordPressへの設置を始めましょう。WordPressへ設置するには、テーマの編集から行います。

テーマの編集は慎重に行う必要があります。なぜなら、ここに書かれている文字情報は、Webサイトを構成するコードだからです。

関係の無い部分に追記や削除など編集を加えてしまうと、Webサイトが正しく表示されなくなってしまうトラブルに発展してしまいますので、慎重に行いましょう。

WordPressのテーマを編集するには、左側のメニューの[外観]をクリックし、[テーマファイルエディター]をクリックします。

Wordpressのテーマファイルエディターの画像

[テーマファイルエディター]をクリックすると、右側にテーマファイルの一覧が表示されますので、[テーマヘッダー(header.php)]をクリックします。

もし「テーマヘッダー(header.php)」が見つからない場合はこちらをご覧ください。

Wordpressのテーマヘッダーを示す画像

[テーマヘッダー]をクリックすると、ファイルの内容が表示されますので、この中にある<head>から</head>の間にGoogleタグマネージャーのコードを追記します。

<head>が見つからない場合は、[Ctrl]キーを押しながら[F]キーを押すと検索窓が現れますので、<headと検索するとすぐに見つけることができます。

ちなみに検索する時は<head>の「>」を敢えて付けずに検索した方が見つけやすいです。

尚、追記するコードは2つの内の1つ目、「<head>のなるべく上の方に貼り付けてください」と記載のあるコードを追記します。

Wordpressのheadタグの後にGTMタグを設置する画像

次に、2つ目のコードを<body>の直後に追記します。

こちらも<head>の時と同じように、[Ctrl]キーを押しながら[F]キーを押し<bodyを検索するとスグに探せます。

ちなみに<body>は必ずしも<body>という形になっているとは限りません。

次のキャプチャの様に、

<body <?php body_class(); ?>>

といった、<body ○○>という構造になっている場合も良くありますので、検索するなら<bodyと、敢えて「>」を付けずに行うと見つけやすいです。

Wordpressのbodyタグの後にGTMタグを設置する画像

<head>と<body>それぞれにコードを設置できたら、ページ下部にある[ファイルを更新]ボタンをクリックします。これでWordPressへの設置が完了しました。

Wordpressのテーマエディタでファイルを更新する画像

もし「テーマヘッダー(header.php)」が見当たらない場合

もし「テーマヘッダー(header.php)」が見当たらない場合は、テーマファイルを一つずつ開き確認して行きましょう。

まずは<head>を探したいので、[Ctrl]キーを押しながら[F]キーを押し、<headを検索します。

検索してヒットしなければ、次のテーマファイルを開いて検索を繰り返しましょう。

Googleタグマネージャーの設置を確認する

Googleタグマネージャーのコードを設置したら、正しく設置できているか念のため確認をしましょう。

確認する方法はGoogleタグマネージャーをWebサイトに設置する方法で紹介していますので、是非一読下さい。

まとめ

本ページでは、WordPressへGoogleタグマネージャーを設置する方法をご紹介致しました。

テーマの編集は初めてで、不安に感じる方もいらっしゃるかもしれませんが、作業自体はそこまで難しくありません。

Googleタグマネージャーを正しく設置できれば、色々なサービスとのデータ連携がしやすくなりますので、是非、ご自身でチャレンジして見てください。

GoogleタグマネージャーをWebサイトに設置する方法

googleタグマネージャーのアイキャッチ画像

Googleタグマネージャーの設置には、たったの2ステップで完了する事が出来ます。本記事では、ステップに合わせてタグマネージャーの設置方法をご紹介致します。

  1. アカウントを作成する
  2. Googleタグマネージャーをインストールする

1.アカウントを作成する

https://tagmanager.google.com/ へアクセスし、タグマネージャーを使用する予定のGoogleアカウントでログインします。

googleログイン画像

Googleアカウントでログインすると、タグマネージャーにアクセスできます。

まずはタグマネージャーのアカウントを作成しますので、[アカウントを作成]をクリックします。

Googleタグマネージャーのアカウントを作成する画像

それぞれ必要情報を入力します。[アカウント名]には通常、会社名を入力します。[国]は日本を指定します。

[Googleや他の人と匿名でデータを共有]のチェックボックスは任意です。サイトの特定に至らないデータを共有するとの事ですので、特に社内的な規制が無ければ、チェックしておくと良いと思います。

Googleタグマネージャーのアカウント名を入力する画像

続けて[コンテナ名]にはWebサイトのドメインや、サイト名を入力しておくと良いです。

[ターゲットプラットフォーム]は、タグマネージャーを設置する先を選択し[作成]をクリックしましょう。

Webサイトへの設置であれば、[ウェブ]を選択しましょう。

Googleタグマネージャーのコンテナ名を入力する画像

最後に利用規約を確認し、ページ下部の[GDPR で必須となるデータ処理規約にも同意します。]にチェックを入れ、右上の[はい]をクリックします。

これでアカウントを作成できました。

Googleタグマネージャー利用規約の画像

2.Googleタグマネージャーをインストールする

アカウント作成後、画面上にコードが表示されます。

Googleタグマネージャーのインストールは、この表示された二つのコードをWebサイトに設置すれば完了です。

Googleタグマネージャーのコードの画像

ちなみにコード内の[GTM]で始まる文字列はGoogleタグマネージャーのコンテナIDです。

GoogleタグマネージャーのコンテナIDを示す画像

Webサイト制作会社へ依頼する

Webサイトへのコード設置は、一般的にはWebサイトを制作した会社に依頼し設置します。一度、制作会社への相談をお勧め致します。

ただし、制作会社とのご契約内容によっては、コード設置は有償になる場合もありますので、この点についてもお確かめ下さい。

WordPressへ設置する

WebサイトをWordPressで制作している場合は、GoogleタグマネージャーをWordPressに設置するでご案内していますので、ご一読下さい。

コードを再表示したい場合

コードを再度表示したい場合はタグマネージャーのコンテナID「GTM-xxxx」をクリックするれば、再度コードを表示する事ができます。

Googleタグマネージャーのコードを再表示する画像

Googleタグマネージャーが設置できたかを確認する

WebサイトにGoogleタグマネージャーが設置できているか確認するには、次の方法があります。

ページソースで確認する

Webサイトのページソースを確認すれば、Googleタグマネージャーのコードを設置できているか確認できます。

ページソースを確認するには、Webサイトを開いた状態でキーボードの[Ctrl]キーを押しながら[U]キーを押します。

すると、ページソースを開く事ができますので、この中にGoogleタグマネージャーのコードが記載されているかを確認します。

Googleタグマネージャーの設置をソースコードで確認している画像

コードを確認する際は、検索窓を利用すると便利です。

検索窓は[Ctrl]キーを押しながら[F]キーを押すと現れますので、[Google]や[Google Tag Manager]、[GTM]などを入力し検索すると、すぐにコードを見つける事ができます。

見つけたコードの中に「GTM-xxxx」という表記のコンテナIDが記載されていますので、ここが合致していれば正しく設置できています。

もし、コードを見つける事が出来ない、又はコンテナIDが合致していなければ、うまくコードを設置できていない可能性が高い為、改めて制作会社へ確認なさることをお勧め致します。

デベロッパーツールで確認する

デベロッパーツールを使用すれば、Googleタグマネージャーのコードを設置できているか確認できます。

デベロッパーツールを使用するには、キーボードの[F12]キーを押すか、[Ctrl]キーと[Shift]キーを押しながら[I]キーを押すことで利用する事ができます。

デベロッパーツールを開いたら、[Sources]をクリックし、[www.googletagmanager.com]が表示されているか確認します。

[www.googletagmanager.com]をクリックすると、タグマネージャーのコンテナID(gtm.js?id=GTM-xxxx)が表示されますので、今回設置しようとしているコードのコンテナIDと合致しているか確認します。

Googleタグマネージャーの設置確認をデベロッパーツールで行っている画像

[www.googletagmanager.com]が表示されない、又はコンテナIDが合致していなければ、うまくコードを設置できていない可能性が高い為、改めて制作会社へ確認なさることをお勧め致します。

Tag Assistant Legacyを利用する

Tag Assistant LegacyはChrome用の拡張機能です。Tag Assistant Legacyを活用すれば、Googleタグマネージャーを設置できているか簡単に確認する事ができます。

Tag Assistant LegacyはChromeのウェブストアから無料で取得する事ができます。この機能を使えば、タグマネージャーをはじめ、閲覧しているWebサイトに設置されているタグを可視化する事ができます。

導入し始めは次の様な画面になりますので、[Record]をクリックし、[Ctrl]キーを押しながら[R]キーを押し、ページを更新します。

Googleタグマネージャーの設置確認をTag Assistant Legacyで行っている画像

Tag Assistant Legacyを再度開くと、閲覧中のWebページに設置されているタグを確認する事ができます。

Googleタグマネージャーが表示され、コンテナIDが合致していれば、正しくコードが設置されています。

Tag Assistant LegacyにGoogleタグマネージャーが表示されている画像

まとめ

Googleタグマネージャーは一度設置しておくと、GoogleアナリティクスやMicrosoft Clarityのタグを設置したり、外したりする事が簡単にできる様になります。

ちょっと難しそうな感じがしますが、実はとても簡単で便利なシステムです。是非、活用をしてみましょう。

Microsoft Clarityを導入する手順

Clarityのダッシュボード画像

Webサイトを最適化する際、ヒートマップツールはとても役に立ちます。ここでは無料のヒートマップツール、Microsoft Clarityを導入する手順をご紹介致します。

尚、Microsoft Clarityを導入する為に、Googleタグマネージャーの利用を推奨しています。

Googleタグマネージャーを未導入の場合は、Googleタグマネージャー設置の2ステップで導入方法をご紹介していますので、是非参考にして下さい。

Microsoft Clarity導入の4ステップ

Microsoft Clarityを導入するには次の4つのステップが必要です。

  1. サインアップする
  2. 新しいプロジェクトを作成する
  3. セットアップする
  4. 計測開始

1.サインアップする

https://clarity.microsoft.com/ へアクセスし、[Sign up-it’s free!]をクリックします。

Clarityのトップページ画像
Clarityのトップ画面

Microsoft、Facebook、Googleの各種アカウントを利用できますので、お好みで選択します。

今回はGoogleのアカウントを選択し、Gmailのアドレス、パスワードを入力しました。これでサインアップは完了です。

Clarityへのサインアップ画像
Googleを選択

2.新しいプロジェクトを作成する

サインアップが完了すると、新しいプロジェクトの作成画面が表示されます。

[Name]にはプロジェクト名(特に考えが無ければサイト名がお勧めです)、[Website URL]には計測したいWebサイトのURL、[Site category]には今回計測するサイトの最も近しいものを選びましょう。

全て入力したら[Add new project]をクリックして完了です。

Clarityの新規プロジェクト作成画像
新しいプロジェクトを作成

3.セットアップする

ここではWebサイトの計測を始める為の設定を行います。

Microsoft ClarityではGoogleタグマネージャーの利用をお勧めしていますので、計測したいWebサイトにGoogleタグマネージャーを設置済であれば、[Google Tag Manager]を選択しましょう。

Googleタグマネージャーを未導入の場合は、Googleタグマネージャー設置の2ステップで導入方法をご紹介していますので、是非参考にして下さい。

Clarityのセットアップ画像
Setupの画面

[Google Tag Manager]を選択すると、Googleタグマネージャーとの接続を求める画面が表示されます。[Connect now]をクリックしましょう。

ClarityとGTMの接続画像
Google Tag Managerと接続する画面

接続するGoogleタグマネージャーのアカウントとコンテナを選択し、[Create and published]をクリックします。

Clarityと接続するGTMアカウントの選択画像
アカウントを選択する画面

これでGoogleタグマネージャーとの接続が完了致しました。

ClarityとGTMの接続が完了した画像

4.計測開始

計測が開始されると、次の様な画面が表示される様になります。

Clarityのダッシュボード画像

データが表示されない場合

セットアップが完了してスグの段階では、データが現れず、次のような画面が表示される場合があります。

この場合、1,2時間程度の時間を空けてから再度閲覧してみると、データが表示される様になりますので、お試しください。

Clarityのデータが表示されていない画像

まとめ

この記事ではMicrosoft Clarityの導入ステップをご紹介致しました。

2022年2月時点では英語表記しかございませんが、とても簡単にセットアップできますので、是非、設定してみてください。