<p>業務で、直接ソースコードに埋め込んでいた計測・広告タグをのを、Google Tag Manager（以下GTM）を導入し順次GTMからのタグ配信をすることになりました。そのプロジェクトを進めるにあたって、概念的な部分から設定についてなど調べてみました。</p>
<h2 id="gtm%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#gtm%E3%81%A8%E3%81%AF" aria-hidden="true"></a> GTMとは</h2>
<p>Google Analyticsなどの計測タグやGoogle広告などの広告タグを、コード編集なしで一元管理・設定・配信できるタグ管理システムです。</p>
<p><a href="https://support.google.com/tagmanager/answer/6102821?hl=ja" target="_blank" rel="nofollow noopener noreferrer">タグ マネージャーの概要 - タグ マネージャー ヘルプ</a></p>
<h2 id="%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%A8%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A">
<a class="header-anchor-link" href="#%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%A8%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A" aria-hidden="true"></a> アカウントとコンテナ</h2>
<p>GTMを設置したい、しようとなった場合に、アカウントとコンテナというものを作成する必要があります。</p>
<ul>
<li>アカウントは企業や組織、団体、個人管理などのくくりで作成するもの</li>
<li>コンテナはGTMを設置するサイト単位で作成するもの</li>
</ul>
<p>例えば、株式会社AがBというサービスサイトとCというカンパニーサイトにGTMを導入したい場合は以下のように作成します。</p>
<ul>
<li>アカウント
<ul>
<li>株式会社A</li>
</ul>
</li>
<li>コンテナ
<ul>
<li>サービスサイトB</li>
<li>カンパニーサイトC</li>
</ul>
</li>
</ul>
<h2 id="%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%A8%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%A8%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9" aria-hidden="true"></a> バージョンとワークスペース</h2>
<p>コンテナで作業する際に、ワークスペースの中で作業する必要があります。</p>
<p>これはGitと同じようなもので、バージョン管理をしてくれるものです。</p>
<p>メインのブランチからワークスペースを切って作業をして、変更に問題がなければメインに反映させるという流れで作業でき、複数人での作業も簡単に行うことができます（コンフリクトなども対応できるらしい）。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--REsfX5g2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/053ba4097e9aa71beb8f58f4.png%3Fsha%3D1e34ff7dddefd52de5027d5001c44be113752ad3" alt loading="lazy" class="md-img"></p>
<p>参照：<a href="https://ayudante.jp/column/2016-10-11/13-59/" target="_blank" rel="nofollow noopener noreferrer">GTMで複数人での運用向け機能「ワークスペース」が実装されました</a></p>
<h2 id="%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h2>
<p>環境という概念があり、本番用や検証用などで環境を区切ることができます。環境によってタグの出し分けや、設定したバージョンを環境毎に反映させることなども可能です。</p>
<p>ex) 検証環境と本番環境で、別々のユニバーサルアナリティクスタグを使うなど。</p>
<p><a href="https://www.axis-corp.com/blog/analysis/4512.html" target="_blank" rel="nofollow noopener noreferrer">Googleタグマネージャの新機能「環境」を使って複数の環境を効率的に管理する | 株式会社アクシス</a></p>
<h2 id="%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A">
<a class="header-anchor-link" href="#%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A" aria-hidden="true"></a> ウェブコンテナとサーバーコンテナ</h2>
<p>通常はコード上に埋め込んで使用するウェブコンテナというパターンが多い。</p>
<ul>
<li>タグが増えてくると、それぞれのタグが各種分析サーバーへデータ送信をするため、処理が多くなる。</li>
<li>もっと複雑なことをしたい（あまりイメージわかないけどデータ前処理・加工とか？）</li>
</ul>
<p>そういう場合にはサーバーコンテナという方法もあるようです。</p>
<p>GCPにコンテナを建てて、サーバー上で諸々の処理を行うことができ、以下のようなメリットがあります。</p>
<ul>
<li>Webサイト側での処理の軽量化</li>
<li>送信データに対するより複雑な処理の実施</li>
<li>処理やデータの隠蔽</li>
<li>通信データの通信前最終チェックを一元化できる環境づくり</li>
</ul>
<p>反対にデメリットとしては以下です。</p>
<ul>
<li>計測のロスト率上昇のリスク</li>
<li>ビジネスサイトの本番環境での利用は有料</li>
<li>前述のメリットの享受は設定難易度が高い</li>
</ul>
<p><a href="https://dev.classmethod.jp/articles/server-side-ga4-tag-management-by-google-tag-manager/" target="_blank" rel="nofollow noopener noreferrer">Google Tag Managerのサーバーサイド タグ設定でGA4タグを管理してみた | DevelopersIO</a></p>
<p><a href="https://ayudante.jp/column/2020-08-21/11-00/" target="_blank" rel="nofollow noopener noreferrer">GTMにサーバーサイドで動作するサーバー用コンテナが登場</a></p>
<h2 id="%E3%83%87%E3%83%BC%E3%82%BF%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%BC%E3%82%BF%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC" aria-hidden="true"></a> データレイヤー</h2>
<p>GTM上の設定だけでは情報に不足があって、アプリケーション上からGTMへデータを渡したいことが出てくるが、そういう場合はデータレイヤーというものを使います。</p>
<p>ex)ユニバーサルアナリティクスのイベント送信や、トランザクションデータの送信など。</p>
<p>webアプリでの使い方はフロントエンドのJSで、 <code>dataLayer</code> という変数にオブジェクトを <code>push</code> すれば、GTM側で検知してくれてデータを渡すことができます。</p>
<div class="code-block-container"><pre class="language-jsx"><code class="language-jsx">dataLayer<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 <span class="token literal-property property">hoge</span><span class="token operator">:</span> <span class="token string">'hoge'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="gtm%E3%81%AE%E8%A8%AD%E5%AE%9A%E9%A0%85%E7%9B%AE%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#gtm%E3%81%AE%E8%A8%AD%E5%AE%9A%E9%A0%85%E7%9B%AE%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> GTMの設定項目について</h2>
<p>設定できる項目は以下の3つです。</p>
<h2 id="%E3%82%BF%E3%82%B0">
<a class="header-anchor-link" href="#%E3%82%BF%E3%82%B0" aria-hidden="true"></a> タグ</h2>
<p>ユニバーサルアナリティクスやGoogleタグなど、解析やマーケティングのサービスプロバイダーが提供するコードのセグメントを設定できます。</p>
<p>設定はGTMの管理画面上で行い、ソースコード上にはGTMのタグを記述するだけで様々なタグを配信できます。</p>
<p>呼び出すタイミングもトリガーを設定すれば、意図したタイミングで呼び出すことが可能です。</p>
<h2 id="%E3%83%88%E3%83%AA%E3%82%AC%E3%83%BC">
<a class="header-anchor-link" href="#%E3%83%88%E3%83%AA%E3%82%AC%E3%83%BC" aria-hidden="true"></a> トリガー</h2>
<p>要素のクリック、ページビュー、データレイヤーの値などでイベントを検知する設定ができます。</p>
<p>タグを配信するには少なくとも1つは設定する必要があります。</p>
<h2 id="%E5%A4%89%E6%95%B0">
<a class="header-anchor-link" href="#%E5%A4%89%E6%95%B0" aria-hidden="true"></a> 変数</h2>
<p>変数は2つのタイプがあります。</p>
<ul>
<li>組み込み変数
<ul>
<li>ページURL、ページパスなど、アプリケーション上から取得できる値でカスタマイズができないタイプ</li>
</ul>
</li>
<li>ユーザー定義変数
<ul>
<li>ユーザーが設定できるタイプ</li>
<li>ex) ユニバーサルアナリティクスのコードなど</li>
</ul>
</li>
</ul>


Google Tag Managerについて調べてみた

ウェブコンテナとサーバーコンテナ

Discussion