Vue.jsでGTMを組み込む

やりたいこと

Vue.jsのコンテンツでタグマネージャーを使う（アナリティクスを読み込むなど）
以下そのための前準備です

前提

アナリティクスのアカウントがあり、GTMに連携済みであること
タグマネージャーでは環境別の設定をされていること

手順

「public/index.html」のheadの最初に追記

public/index.html

<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=<%= VUE_APP_GTM_AUTH %>&gtm_preview=<%= VUE_APP_GTM_PREVIEW %>&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<%= VUE_APP_GTM %>');</script>

「public/index.html」のbodyの最後に追記

<noscript>
<strong>JavaScriptが有効になっていないとサイト内は正しく機能しません。JavaScriptを続行するには有効にしてください。</strong>
<iframe src="https://www.googletagmanager.com/ns.html?id=<%= VUE_APP_GTM %>&gtm_auth=<%= VUE_APP_GTM_AUTH %>&gtm_preview=<%= VUE_APP_GTM_PREVIEW %>&gtm_cookies_win=x"
               height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

環境変数

各環境毎のファイルを用意する

「.env.production」「.env.develop」「.env.staging」などなどプロジェクトルートの直下に置く

各環境毎に設定を記載する

serveで再起動しないと反映しないので注意

VUE_APP_GTM="GTM-YOURCODE"
VUE_APP_GTM_AUTH="YOURAUTH"
VUE_APP_GTM_PREVIEW="env-your"

GTMでの設定

GAのページビュー

履歴の変更をアナリティクスに紐つければ取れる