AMBLのデータサイエンス事業部で働いているサトウとヤノです。好きな色はそれぞれ藤色と水色です。
今回は、今ご覧いただいている弊社オウンドメディア「COLORS」で使用しているGoogleタグマネージャーのTipsをご共有します。
Googleタグマネージャーとは？
Googleタグマネージャー（以下、GTM）は、Webサイトやアプリに設置する「タグ」を簡単に管理できるツールです。
今回はみなさんが今ご覧になられているCOLORSサイトの記事についているタグをトリガーに、GTMタグ（どちらもタグでわかりづらいですね）を発火させる方法をご紹介します。
目標
GTMで記事のタグごとにGTMタグを設定し、GA4でそれを確認できるようにする。
設定手順
①まずデベロッパーツールを開き該当箇所のHTML要素を確認します。
<div class=”tag-box”>に格納されていることがわかりました。
確認したらコピー>selectorをコピー
で該当箇所のCSSセレクタをコピーします。
② GTMにてCSSセレクタを指定した変数を作成します。
a. 変数のタイプ＞DOM要素を選択
b. 選択方法＞CSSセレクタを選択
c. 要素セレクタに1でコピーした箇所を指定
③ タグごとにトリガーを設定します。
a. トリガーのタイプ＞ページビュー
b. このトリガーの発生場所＞先程設定した変数と指定したいタグの名前を設定
④ 作成したトリガーで作動するタグを作成します。
⑤ プレビューモードでタグの発火を確認・公開します。
プレビューでタグの発火を確認したいページへアクセスし、タグの動作が想定したものになっているかを確認してください。
問題なければ公開し、完了です。
⑥ データが溜まったらGA4でも計測されているか確認しましょう！
おわりに
GTMを使用することで簡単にWEBサイトのアクセス解析を深めることができます。
みなさんも活用してみてはいかがでしょうか？
