WEBサイト

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のタグを設置したり、外したりする事が簡単にできる様になります。

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

エラー「data-vocabulary.orgスキーマのサポートは終了します」を解消する方法

エラー「data-vocabulary.org スキーマのサポートは終了します」が発生している画像

バズ部のXeoryを利用させて頂いているのですが、Google Search Consoleから「data-vocabulary.orgスキーマのサポートは終了します」というエラーが表示されるようになりました。

解消方法はバズ部でも紹介されていますが、本記事ではエラーを解消するまでに私たちが行った手順を、もう少し詳しくご紹介致します。

エラー解消までの6ステップ

「data-vocabulary.orgスキーマのサポートは終了します」というエラーは、6つのステップで解消できます。

  1. Xeoryの修正ファイル配布ページにアクセスする
  2. 修正ファイル(zip)をダウンロードし、解凍する
  3. サーバーへアクセスする
  4. bzb-functions.php というファイルを置き換える
  5. Search Console の[修正を検証]をクリック
  6. 修正が認められました(合格)

修正ファイルのダウンロード

Xeoryの修正ファイル配布ページへアクセスし、「1) 下記のURLからダウンロードをお願いいたします。」のURLをクリックすると、zipファイルがダウンロードされます。

修正ファイルのダウンロードURL
URLをクリックして下さい
修正ファイルがダウンロードされた画像
修正ファイル(zip)がダウンロードされました
xeory_bzb_functionsフォルダ内の画像
xeory_bzb_functionsには2つのフォルダがあります
xeory_schemaのフォルダを選択する画像
xeory_schemaのフォルダを開きます
xeory_baseを選択する画像
利用中のテンプレートと同じフォルダを開きます(私たちはBASEを利用中)
bzb-functions.phpファイルの画像
このファイルを活用します

この時、自分がどちらのテンプレートを使用しているかわからない時は、Wordpress管理画面の[外観] > [テーマ] で確認する事ができます。

利用中のテンプレートを確認している画像

サーバー内でファイルを置き換える

ダウンロードした修正ファイルは、Wordpressを設置しているサーバー内で差し替えを致します。

その為、先ずはサーバーへアクセスをして下さい。私たちはXserverを活用していますので、Xserverの画面でご紹介致します。

まずは[ファイル管理]をクリックし、格納されているファイルを開きます。

サーバーの管理画面画像
[ファイル管理]をクリック

Webサイトのフォルダをクリックします。私たちの場合は shikumican.com というフォルダになっています。

サーバー内のファイル一覧画像
Webサイトのフォルダをクリック

public_html > wp-content > themes >xeory_base > lib > functions とフォルダを開けていき、「bzb-functions.php」というファイルがある事を確認します。

このファイルと先ほどダウンロードした修正ファイルを差し替えます。差し替える際は[アップロード]を使用します。

bzb-functions.phpを差し替える画像
フォルダを開けていき、bzb-functions.phpを修正ファイルと差し替えます

差し替えたらサーバー内での作業は完了です。

Search Consoleで[修正の検証]を行う

サーバー内でのファイル差し替え作業が完了したら、Google Search Consoleで[修正の検証]ボタンを押します。

あとは検証が完了し、「合格」と判断されることを待ちます。

もし、検証中に「保留」になったとしても大丈夫です。私たちも「保留」になり、約3週間ほど経ってから無事「合格」になりました。

Search Consoleの検証画像
合格になるまで約3週間かかりました

まとめ

今回、「data-vocabulary.orgスキーマのサポートは終了します」というGoogle Search Console のエラー解消方法についてご説明致しました。

Xeoryを提供して頂いているバズ部で修正ファイルとともに、エラーの解消法もご説明頂いておりますが、中々「保留」が解消されず、不安になった経験もありましたので、実体験を踏まえ、もう少し詳しくご説明できればと思い、本記事を作成致しました。

是非、参考になれば幸いです。