Nuxt.jsにgoogle tag manegerを埋め込む時の注意
GTM埋め込みの注意
個人的に作っている「住所検索」のwebアプリ。だいぶんまともに動くようになったのでページのアクセスなどを測定するためにGoogleアナルティクスの活用を考えてた。その際にアナルティクスのタグをサイトに埋め込むやり方と、タグマネーシャーのタグを埋め込んでGTM経由で計測してゆくやり方がある。今回はタグマネーシャー経由のやり方を取ることにしたが埋め込み方法はちょっと注意が必要だ。
- 参考「住所検索」 - https://zsearch-web.becom.co.jp/
GTMのタグを複数埋め込む可能性？
通販系のLPやカートのページには大抵GTMタグが埋まっていることだろうが、GTMタグを複数埋めなければいけない状況に出会したことはあるだろうか？タグを複数うめなくてもいいようにGTMタグを使うのだがGTMタグの中のタグの量が莫大になり複数埋め込みたくなる場合もあるのだ、googleの公式ヘルプでは複数埋めても動くような記事は存在した。
Nuxt.js向けの拡張モジュールは存在するが若干注意
gtm-moduleというものが存在するがこちらを活用する場合は注意が必要。複数埋め込みたい場合、どうすれば良いかわからない。それと`nuxt dev`の起動時には反応しない設定が標準で効いているので、設定を変更したりと使えなくはないが多少ハマるかもしれない、あとはNuxt3に対応してくれるかどうかわからないので今回は使わないことにした。
GTMの埋め込みタグは二つある
単純な話、googleの公式の説明の通りに埋めればいいのだ。説明は下記のような内容だ。
Google タグ マネージャーをインストール 下のコードをコピーして、ウェブサイトのすべてのページに貼り付けてください。 このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。 ... tag ... また、開始タグ <body> の直後にこのコードを次のように貼り付けてください。 ... tag ...
headタグの中に埋め込む方法
nuxt.config.jsのheadプロパティに下記のように記述すれば反映されることがわかる。詳しい説明はNuxtの公式ドキュメントとvue-meta ドキュメント を参考にするとよい
`nuxt.config.js`(GTM-*******は読み替えてください)
head: {
...
script: [
{
hid: 'gtmHead',
innerHTML: `
(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;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-*******');`,
},
],
...
},
- 参考（Nuxt） - https://nuxtjs.org/ja/docs/configuration-glossary/configuration-head
- 参考（vue-meta） - https://vue-meta.nuxtjs.org/api/#metainfo-properties
bodyタグに埋め込む方法
こちらが曲者だ。bodyタグに埋め込む方のgtmタグはnoscriptタグといってjsが動かない時にこちらを動かすようにとのことだが、実際jsの動きを許可してないサイトだったらnuxtがまともに動くと思えず埋め込むのをやめようかと思ったが性格が几帳面なのでちゃんと埋め込もうと思った。vue-metaのドキュメントをみるとpbodyオプションをつけるとbodyタグ直下うめこめるが、iframeタグの展開がうまくいかない、具体的には下記のような設定を試したみた。
`nuxt.config.js`(GTM-*******は読み替えてください)
head: {
...
noscript: [
{
hid: 'gtmBody',
innerHTML: `
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-*******"
height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
pbody: true,
},
],
__dangerouslyDisableSanitizersByTagID: {
gtmBody: ['innerHTML'],
},
...
},
iframeタグがうまく展開できていなのはなぜだ
Chrome DevToolsでエレメントをみるとタグではなく文字として展開されているようだ
`Chrome DevTools`
<noscript data-n-head="1" data-hid="gtmBody" data-pbody="true"> "<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5SH57MX" height="0" width="0" style="display:none;visibility:hidden"></iframe>" </noscript>
なぜこうなるのかさっぱりわからない
随分調査したが、なぜ文字で展開されるのかわからない。なんだか腑に落ちないが方法としては。`layouts/default.vue`の共通ページのなかに普通にタグをペーストして対応することにした。このやりかただときちんとタグが展開されれているようだ。
`layouts/default.vue`
<template>
<div>
<!-- Google Tag Manager (noscript) -->
<noscript
><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-5SH57MX"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe
></noscript>
<!-- End Google Tag Manager (noscript) -->
...
<Nuxt />
</div>
</template>
`Chrome DevTools`
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5SH57MX" height="0" width="0" style="display: none; visibility: hidden;"></iframe></noscript>
どういうことなんだろうか？
だれか原因わかる方いれば教えください!とりあえずは今回これですすめることにした。
コメント
0 件のコメント :
コメントを投稿