GoogleTagManager を入れるためだけに、サードライブラリをインストールするのめんどい
てなわけで、Viteを使ってサイトを構築してるときにアクセス数とかの管理のために、GoogleTagManagerをhtmlに記述するってよくあるよね（多分
ベースのindex.htmlに直接書いてもいいんだけど、出来れば本番環境にのみタグを入れたいとかもあるはず。
そんなときにタグを入れるだけのライブラリとかも合ったりしてソレを入れればいいじゃんって感じですが、どうせなら勉強がてらに作ってみればいいじゃんということで作ってみた。
やりたいこと
- 本番環境にGoogleTagManagerをいれる
- 開発・検証環境はrobotsのnoindexをいれる
index.html
<!doctype html>
<html lang="ja">
<head>
<!-- Google Tag Manager ここをリプレイスする予定-->
<gtm></gtm>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>何かサンプルサイト</title>
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="何かサンプルサイト">
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.js"></script>
</body>
</html>
HTMLには変換用のタグを用意します
vite.config.js
/** GoogleTagManager差し込み用プラグイン */
const gtmPlugin = () => {
const isProduction = process.env.NODE_ENV === 'production';
return {
name: 'html-transform',
transformIndexHtml(html) {
return html.replace(
/<gtm><\/gtm>/,
(isProduction
? `<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;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','ここに何かIDを入れる');</script>`
: `<meta name="robots" content="noindex">`)
)
},
}
}
export default defineConfig(() => ({
// 省略
plugins: [vue(), gtmPlugin()],
// 省略
}));
transformIndexHtml で index.htmlが文字列として取得されるので、
ソレをprocess.env.NODE_ENVの値によって置換してるだけというシンプルなもの。
まとめ
公式だと、規約だとかなんだとかあるみたいですが、即席のプラグインだし試しにやってみただけなので、わかるようになってから守るようにしようかと。
※命名とかよりもその機能が使えるかどうかが自分としては重要
robots.txtとかsitemap.xmlとか生成するとかも今後作れたらいいね（ネタを作って締める