Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブgoogle-analytics

2018年3月5日 By KD コメントを書く

WordPressブログにGoogleタグマネージャ経由でGoogleアナリティクスを設定する方法

WordPressブログにGoogleタグマネージャ経由でGoogleアナリティクスを設定する方法

ブログをやっているとGoogleアナリティクス用のタグを埋め込む必要があったり、Google AdSense用のタグを埋め込む必要があったりと、やたらとタグを埋め込む必要が生じます。だいたいHTMLのヘッダーに直接タグを埋め込むことになるのですが、タグが増えてくるとどこにタグを書いたのか煩雑になってきます。今回はGoogleタグマネージャでタグを整頓して管理可能にし、配信する方法を紹介します。

Googleタグマネージャとは?

Googleタグマネージャ(Google Tag Manager: GTM)とは、Googleアドセンス(Google AdSense)といった広告のタグやGoogleアナリティクス(Google Analytics)といったアクセス解析のタグなどを一元管理するためのタグ管理サービスです。

通常タグを設定する場合は、タグ毎にHTMLのヘッダーにスクリプトを書く必要がありますが、Googleタグマージャを使った場合は、GTMのタグを一つだけ埋め込むだけで良くなり、タグの管理が簡単になるというところがメリットです。

事前準備

設定方法に入る前に事前に以下の作業を完了して下さい。

GoogleタグマネージャとGoogleアナリティクスの登録

Googleのアカウントを作成し、GoogleタグマネージャとGoogleアナリティクスの登録を完了して下さい。自分のブログとの紐付けが完了している必要があります。

ブログのヘッダにGoogleタグマージャのタグを埋め込む

普通にGoogleタグマネージャのスクリプトをヘッダに埋め込めばOKです。

WordPressの場合は、「Google Tag Manager for WordPress」というプラグインがあるので、それを使えばGoogleタグマネージャのIDを入力するだけで完了します。

GTM4WP
GTM4WP
Download QR-Code
GTM4WP
Developer: Thomas Geiger
Price: Free

スクリーンショット 2018 02 05 1 24 57

GoogleタグマネージャによるGoogleアナリティクスの設定方法

それでは設定をしていきましょう。Googleタグマージャから対象のブログを選び、メイン画面を表示して下さい。

Googleアナリティクスの変数を作成する

左側のメニューの「変数」をクリックします。

スクリーンショット 2018 02 05 0 43 51

「ユーザー定義変数」から「新規」をクリックします。

スクリーンショット 2018 02 05 0 44 15

変数のタイプは「Googleアナリティクス設定」を選択します。

スクリーンショット 2018 02 05 0 44 50

トラッキングIDにはGoogleアナリティクスのIDを設定します。名前は任意で構いません。

スクリーンショット 2018 02 05 0 46 54

右上の「保存」をクリックすれば変数作成は完了です。

タグを作成する

次に、左側のメニューの「タグ」をクリックします。

スクリーンショット 2018 02 05 0 47 20

「タグ」から「新規」をクリックします。

スクリーンショット 2018 02 05 0 47 35

タグのタイプは「ユニバーサル アナリティクス」を選択します。

スクリーンショット 2018 02 05 0 48 00

トラッキングタイプには「ページビュー」を、Googleアナリティクス設定には先程作成したユーザー定義変数を選択します。

スクリーンショット 2018 02 05 0 50 22

トリガーには「All Pages」を選択します。

スクリーンショット 2018 02 05 1 02 02

右上の「保存」をクリックすればタグ作成は完了です。

公開する

タグの作成が完了したので、そのタグをブログに公開します。

上のメニューにある「公開」ボタンをクリックします。

スクリーンショット 2018 02 05 0 50 58

すると以下の画面が表示されるので、「バージョン名」に任意の名前を付けて「公開」をクリックします。「バージョン名」は新しく追加や変更したタグの概要が分かるような名前を付けると良いでしょう。

スクリーンショット 2018 02 05 0 51 25

これで、ブログにGoogleアナリティクスのタグが配信されました。

タグのプレビュー方法

ここまででタグの公開は完了していますが、ちゃんとタグが配信されているかを確認する「プレビュー」の方法も紹介します。

タグのプレビューを開始する

上のメニューにある「プレビュー」ボタンをクリックします。

スクリーンショット 2018 02 05 0 52 06

するとワークスペースがプレビュー中の表示になります。

タグのプレビューを確認する

プレビュー中の状態で自分のウェブサイトを確認してみましょう。すると右下に以下のアイコンが出現します。

スクリーンショット 2018 02 05 0 54 11

これをクリックすると、Googleタグマネージャのプレビュー表示を確認できます。以下の場合は、先程公開した「Google Analytics タグ」がちゃんと配信され、イベントとして発火していることが確認できます。

スクリーンショット 2018 02 05 0 53 14

タグのプレビューを終了する

プレビューを終了する場合は、「プレビューモードを終了」をクリックすればOKです。

スクリーンショット 2018 02 05 0 52 24

最後に

いかがでしたか?ここまで来た皆さんは自身のWordPressブログにGoogleタグマネージャ経由でGoogleアナリティクスを設定できたと思います。素晴らしいことに、今後は新しいタグを追加したい場合にスクリプトを直接HTMLに埋め込む必要はなく、Googleタグマネージャを使うことで一元管理して公開できます。では。

カテゴリ : ライフハック タグ : google-analytics, google-tag-manager, wordpress

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • TumblrからWordPressにブログ移転する最適な方法
    TumblrからWordPressにブログ移転する最適な方法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~
    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~
  • バンクーバー留学豆知識: バンクーバーのカジノを攻略せよ!必勝法を公開します!
    バンクーバー留学豆知識: バンクーバーのカジノを攻略せよ!必勝法を公開します!

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes