読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

【保存版】はてなブログにGoogle TagManagerを導入してみたので覚え書き

f:id:sitk:20160710101057p:plain

www.google.com

Google TagManagerの勉強会に参加してきました。

早速なので、自分のブログにも設置してみようと思います。

これ、使いこなせると、あれこれできますよっ!

事前準備

www.google.com

まずは、Google Analytics のトラッキングIDをご準備ください。

 UA-xxxxxxxx-1

↑こんなやつです。

では、早速Google TagManagerの設定をしていきましょう。

新しいアカウントの追加

まずは、「新しいアカウント」を追加します。

アカウントの設定

「アカウント名」は、今回の場合は「はてなブログ」としました。

f:id:sitk:20160710101139p:plain

コンテナの設定

こちらには、ドメインを記載します。

f:id:sitk:20160710101129p:plain

設定が終わると、埋め込み用のタグが発行されます。

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-T3B5CN"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxxxxx');</script>
<!-- End Google Tag Manager -->

GTM-xxxxxx の箇所が各自の固有IDになります。

発行されたタグは、本来であれば、サイトのbody直下に設置します。

はてなブログの場合は、body直下に記載できないので、別途ご説明します。

その後、こちらの画面に遷移します。

f:id:sitk:20160710101150p:plain

ここまで来たら、先にはてなブログ側の設定を行いましょう。

はてなブログの設定

設定と言っても、GTMのコードをペッと貼り付けるだけ。

サイドバーの「デザイン」を選択します。

あとは、下記のように設定するだけ。

f:id:sitk:20160710101110p:plain

こちらができれば、はてな側の設定は完了です。

再び、Google TagManagerの管理画面に戻りましょう。

「タグ」の設定

f:id:sitk:20160710101118p:plain

「タグ」の設定をおこないます。

こちらで、GTMの機能をいろいろといじっていくわけです。

では、早速「新規」ボタンを押してみましょう。

プロダクトを選択

f:id:sitk:20160710101245p:plain

「Google Analytics」を選択します。

タグの種類を選択

f:id:sitk:20160710101212p:plain

「ユニバーサルアナリティクス」を選択します。

タグを設定

f:id:sitk:20160710101223p:plain

トラッキングIDの箇所に、Google AnalyticsのトラッキングIDを入力します。

トラッキングタイプは「ページビュー」を選択します。

配信するタイミング

f:id:sitk:20160710101201p:plain

「すべてのページ」を選択します。

タグの名前をつける

f:id:sitk:20160710101235p:plain

さいごに、タグの名前を「ユニバーサルアナリティクス」と書いておきます。

これで、「タグの作成」を押したら完了です。

タグの一覧に追加されていることを確認する

f:id:sitk:20160710101254p:plain

公開する

f:id:sitk:20160710101313p:plain

すべての設定が完了したら「公開」ボタンを押します。

f:id:sitk:20160710101303p:plain

小窓が開きますので、「今すぐ公開」ボタンを押します。

f:id:sitk:20160710101321p:plain

完了画面がでればOKです!

こちらの処理を行わないと、反映されませんのでお気をつけて!

「プレビューモード」で反映されているか確認する

f:id:sitk:20160710101332p:plain

「公開」設定から「プレビュー」に変更します。

f:id:sitk:20160710101343p:plain

サイトを見てみると。。。

f:id:sitk:20160710101354p:plain

ここに、さきほど「タグ」で設定した「ユニバーサルアナリティクス」の項目が出現します。

これが出ればOK!

f:id:sitk:20160710101403p:plain

問題なければ、「プレビューモードを終了」にしておきましょう。

さいごに

以上で、設定は完了です!

おつかれさまでした!

今回説明した内容は、はじめの一歩です。

ここに、色んなイベントを絡ませたり、カスタムHTMLを追加できたり。

いろいろ機能があるので、興味がある方は試してみてください!

サイト構築する際には、初期設定で

  • Google Analytics
  • Google TagManager
  • Google SearchConsole

の設定は必須ですね!

Amazon見てたら、「実践 Googleタグマネージャ入門 増補版 Kindle版」が、73% OFF!

実践 Googleタグマネージャ入門 増補版 (デジタルプラスブックス)

実践 Googleタグマネージャ入門 増補版 (デジタルプラスブックス)

しかも、ポイントが20%も付くではないか!

迷わずぽちりました。

勉強していこうと思います(๑´ڡ`๑)

おわり。