ごりゅごブログ塾でプロブロガーするぷさんが絶賛していたツールを使ってみた

投稿日: カテゴリー イベントタグ

先日、ブログ「ごりゅご.com」を運営するごりゅごさん(@goryugo)主催のイベント「ごりゅごブログ塾」に参加してきました。

今回はブログ塾で教わったブログに革命が起きるというツールを実際に使ってみたのでレポートと共に紹介しようと思います!

ブロガーの勉強会&交流会

ごりゅごブログ塾は名古屋で定期的に開かれる、ブロガー達の勉強会&交流会です。

今回の講師はブログ「和洋風KAI」を運営していて、プロブロガー本も出版しているするぷさん(@isloop)。

なんと今年でブログ10周年というブログのお師匠様のような方です。

今回のブログ塾で教わったこと

今回のブログ塾で教わったのは主にこんなこと。

Blog zyuku gtm 01

あんまり意味の無いものはバッサリと無くした方が分かりやすいとか、PCでは3行以下、スマホでは5行以下だと読みやすいとかその他いろいろ教わりました。

この辺の説明は他の参加者さんのレポートに丸投げして(記事の最後にリンクを貼ってあります)

するぷさんが「今日の話を全部忘れてもいいくらいすごい!」と絶賛していたツール「Google Tag Manager」について書いていきます。

ブログ運営に革命が起こる「Google Tag Manager」

Google Tag Manager(以下GTM)とはタグを一元管理できるWebツール。

これを使えばブログに直接記述していたJavaScriptなどのタグをGTMの管理ページ1箇所で管理できるようになります。

GTMで管理しているタグはブログから消せるのでごちゃごちゃと分かりにくい状態が解消されます。

さらにタグの読み込みを後回しにしたりしてブログの表示速度をアップさせる効果があります。

するぷさんがGTMで一元化しているタグはこの4種類だそうです。

Blog zyuku gtm 02

GTMではタグを読み込む条件(ルール)を設定する事ができて、カテゴリ別やURL別に使用するタグを変えるなんて事もできます。

ルールの使い方を考えれば細かい管理が簡単にできそうです。

まだそこまで使いこなしてないけど…

Blog zyuku gtm 03

GTMを実際に使ってみる!

ということでGTMを実際に使ってみたので使い方をまとめてみました。

講義を聞いていた時は難しそうなイメージだったんですが、使ってみると意外とシンプルです。

アカウント作成とブログへの実装

まずはアカウントを作成します。

Google Tag Managerにアクセスして「今すぐ登録」をクリック。

Blog zyuku gtm 04

Googleのアカウントを持っていると「新しいアカウントの追加」の画面になります。

アカウント名にはブログ名を、コンテナ名はブログのURLを入力、コンテナの使用場所はウェブを選択。

そして作成をクリックします。

Blog zyuku gtm 05

利用規約が出てくるので「はい」をクリック。

Blog zyuku gtm 06

ここで出てくるのがブログにGTMを適用させるためのタグです。

全部コピーしてブログのbodyタグの直後に記述すれば準備完了。

Blog zyuku gtm 07

タグを管理する

では実際にタグを管理してみます。

「新しいタグを追加」をクリック。

Blog zyuku gtm 08

標準でサポートしているサービスがたくさんあるので今回は例としてGoogle Analyticsを選びます。

JavaScriptなど、ここの一覧に無いものは「カスタムHTMLタグ」から追加可能です。

Blog zyuku gtm 09

タグの種類はユニバーサルアナリティクスを選択。

トラッキングIDを入力してトラッキングタイプはページビューを選択。

Blog zyuku gtm 10

配信するタイミングはすべてのページを選択。

これでタグを作成します。

Blog zyuku gtm 11

タグ名の変更ができるので自分が分かりやすい名前をつけます。

Blog zyuku gtm 12

するとタグが追加されました。

これだけではまだ有効な状態ではないのでちゃんとタグが動くか確認していきます。

Blog zyuku gtm 13

画面右上の「公開」の横にある矢印からメニューを表示してプレビューをクリック。

Blog zyuku gtm 14

するとオレンジのバーが出てきてプレビューモードになります。

この状態で同じブラウザでブログにアクセスするとタグが有効になっているか確認できます。

Blog zyuku gtm 15

プレビューモードでブログにアクセスすると画面下側にGTMのプレビューが出てきます。

ここの「Tags Fired On This Page」の欄にさっき設定したタグの名前が表示されていればオーケー。

逆に「Tags Not Fired On This Page」の欄にあると動いてないことになります。

Blog zyuku gtm 16

問題がなければGTMの画面に戻り、今度は公開ボタンをクリック。

これで自分以外の人にもタグが有効になりました!

ちなみにGTMに設定したタグはブログの方からは消しておかないと2重で効いてしまうので注意が必要です。

Blog zyuku gtm 17

Google Tag Managerを使ってみた感想

とりあえずGoogle Analytics以外にもPt engineやSNSのシェアボタンなどのコードを入れてみました。

重いコードが無いからなのか、設定が完璧じゃ無いからなのか、ブログの表示速度は体感できるほど大きな変化は感じません。

しかしごちゃごちゃしていたタグがここに集まって、ブログの方はGTMのタグ1個だけになったので管理のしやすさは格段にアップしました!

1度こっちに移してしまえば長ーいコードの中から目的のタグを探し出すという無駄な手間が解消されるので、タグをたくさん使っている人ほど恩恵がありそうですね。

まだ他にもタグが残っているので少しずつGTMに移していこうと思います!

他の参加者さんのレポート記事

現役プロ・ブロガーするぷ氏が語る「ファンが増えて10年継続できるブログのコツ」で語った小手先の技 | レポート | Macお宝鑑定団 blog(羅針盤)

「ファンが増えて10年継続できる ブログ のコツ」をプロブロガー 和洋風KAI のするぷ氏からブログ塾で聞きました #ブログ塾 – リンカジmac

名古屋のブロガー交流イベント #ブログ塾 :現役プロ・ブロガーが語る「ファンが増えて10年継続できるブログのコツ」に参加しました。 | No:11201 | 早乙女珈琲店

ブログ塾に初参加しました! 現役プロ・ブロガーが語る「ファンが増えて10年継続できるブログのコツ」#ブログ塾 | ryo.nagoya(りょうどっとなごや)

読者から好かれるブログ運営とは?プロブロガーの勉強会へ行ってきたよ@名古屋。 – ポニョの酩酊生活。

人気ブログ「和洋風KAI」エメリヤーエンコ・するぷさんの話を聞いてきた #ブログ塾 | IWAIMOTORS BLOG

ジャンケンに勝利!「和洋風KAI」のするぷ氏とごりゅご氏のWブログ添削を受けられた #ブログ塾 | カツイエ.com