GoogleTagManager使いこなしたら相当エラいことになる(仮称ミニコモvol.2)

Googleタグマネージャー

どうも小室です。ここ3ヶ月ナレコモを休んでるよう外からは見えますが、勉強会自体は、実はこっそり月一ペースで変わらずやってます。

そこで先日はGoogleタグマネージャーを学ぶ回をやりました。場所は前回と同じくCherry-Pick社さんをお借りして、参加メンバーは一部入れ替わって。

結果、「これは数千~数万のセミナーの価値あるね」と参加者同士でうなずきあう内容でした。いやはや濃かった。

今回も、Creator’sNEXT窪田さん(KOBITの中の人)が「神速まとめ職人」として、勉強会中にリアルタイムでライティングしてたので、詳しいまとめはこちらをご参照(超絶ディティールに富んだまとめ!)いただくとして、私の方では超初心者向けイントロ用まとめを担当します。

ミニコモ
講師の希望により覆面化(素材は講師指定)

Googleタグマネージャー(GTM)の勉強会を企画した経緯

「とりあえずGA」という風潮はだいぶ定着した感じがありますが、「とりあえずGTM」という風潮はまだ来てないですよね。

で、GTM。多機能すぎて多機能すぎて、どこから手を付けていいか分からなくなるくらいです。使いこなせれば、かなりのことが実現できて、それは我々業界側だけでなく、事業者さんにとっても嬉しいことだと思われます。

ただ、GTMについては書籍も充実しつつありますが、NLPでいうところのVAKなら「V」型(分かる人にはわかる)の小室としては、「誰かに直接教わりたい」のです。

で、私のGTM師匠である美人講師にお願いして、今回、内々の勉強会で「GTMとはこうだ!」とお話いただくことになりました。

Googleタグマネージャーって?

HTMLソースの毎回の編集をすることなく、タグの配信がめっちゃ楽になるツールです。イメージとしてはそうだなあ、、

入院して点滴打つじゃないですか、その時、腕と点滴薬をダイレクトにつなぐんじゃなくて、腕に着脱可能な針を刺すじゃないっすか。

その着脱可能な針みたいなもんす。ってあれ、これじゃわからんですよね。。うーん、、、Excelの関数、、うーん、、

無理な例えを諦めると、「ディレクターやデザイナーが、プログラマの手を煩わせずに、サイトにいろんな仕込みができるようになるツール」ですね。

Webはもちろん、iOS/Androidでも利用可能(SDK貼付)で、最近AMPにも対応したそうです(AMPがわからない方はおググりください)。

GTMのSEO対策な特長をちょこっと

HTMLにタグを直貼りするよりも、ちょこっとだけ読み込みが早くなる(はず)。

表示速度マニアはうへへへってなるツールですね。

なお、GTMで設置可能なのは非同期タグで、注意点としては「ヘッダー/フッター両方に設定するタグ」をGTMで扱うには、js等で小細工が必要になるようです。

 

ディレクター的にGTMが「うおぉぉ」ってなるポイント

プログラムを書ける方なら、結構いろんなことがGTMで実現できるようになります。

それは例えば、

  • カスタムHTML
  • カスタムjs

というフィールドが任意に使えることで、コーディングが得意な方がいれば、かなりいろんなことができるようになるみたいなんです。

具体的には例えば

  • ページ中腹までスクロールされてきたら、「ここまで見た」という情報を取得する
  • ページにきて何秒か経ってから、チャットフォームを表示する

といったことが、(都度都度サイトのhtmlソースを修正することなく)GTM経由で配信できるようになります。

GTM使い方超ざっくり

  1. 変数を選択or用意して
  2. タグを設定して
  3. トリガーを決めて
  4. プレビューで確認してから
  5. 公開する

というのが超大まかな流れです。

変数

  • 多様な変数がプリセットで用意されてるので、だいたいはそこでなんとかなる。
  • デフォルトで用意されている「click~」は便利だからつかっとけ。
  • GAのUA-XXX~は、プロパティIDに定数で入れとけ。
  • クリックエレメントは楽しい

タグ

  • タグもだいたいのものはプリセットで「器」が用意されてる。
  • 器が無いものでも(非同期タグなら)カスタムhtmlで入れ放題。

トリガー

  • タグの配信ルールをトリガーと呼んでおり、タグ×トリガーという組み合わせをいくつも作れます。
  • タグ配信先を決めます。全ページか、特定ページか、イベントだけか、等々。
  • タイマー使うと、表示タイミングを制御できます。
  • トリガーの例外条件を使うと「テストサイトでは発火させない」等の制御ができます。

プレビュー

急に説明調になりますが、設定公開前に、実際に指定したトリガーでタグが動くかどうか、ブラウザチェックが行えます。この時のプレビュー機能が優れていて、タグの動作状況(発火、というらしい)が可視化されるのが便利。やってみてください。

あと、プレビューについては

  1. 「ページビュー」は「ページに来たら」
  2. 「DOM Ready」は「ページの読み込みが開始」されたら
  3. 「ウィンドウの読み込み」は「読み込み完了」したら

発火する、という違いがあることを知っておくと、デバッグだけでなく、新たにトリガーを検討する際に役に立ちますね。

 

運用時のTIPS

バージョンについての説明は細やかにしといたほうがベター。タグにメモが残せるよ。

 

等々、またしても濃い3hでした。

ナレコモみたいに広いテーマでオープンに募る勉強会も実り多いですが、このミニコモみたいに同業他社が組織横断的に知識共有できる場はこれまた意義あるなあと、2回やってみて思いました。

でもそろそろナレコモもやりたいので、運用仕分け考えます。

 

そして今回も大量の持ち寄り品が。みなさん気が利きすぎ笑。

焼売。
鳥の唐揚げ。
飲み物カップと氷を一つに。贅沢な買い方(Oさんご配慮感謝)
読み方わかんないけど美味しいやーつー。
※フレンチ風にお読みください。「胡瓜に味噌を添えて(味噌は小室自家製)」

 

参考ブログ

まずは冒頭の窪田さんまとめは外せないとして、鉄板「カグア」さんのブログエントリをはじめ、他にも「でぶてて」さんの記事や「ウェブタタン」さん、「ウェブ部」さんなど、悶絶するくらい参考になります。

勉強会の開催情報は…

Facebookページから発信しています。