astroとは
軽量なフロントエンドフレームワークです。
本記事ではすでにインストール済みという前提で記載します。
Partytownとは
リソースを大量に消費するスクリプトをメインスレッドからwebワーカーに移すことで、メインスレッドの処理を高速化させる目的のライブラリです。
今回の用途はgoogle tag managerに関する処理をメインスレッドから移行させることで、ページ全体の処理速度及び、SEOスコアの向上を目的として使用します。
webワーカーとは
ウェブアプリケーションにおける処理をメインスレッドから別のスレッドに移すことで、バックグランド処理を実行し、ページのレンダリングなどのメインスレッドの実行完了を早くすることができます。
参考資料：MDN
Party townのインストール方法
npm,pnpm,yarnなどさまざまなインストール方がありますが、今回はnpmで入れます
npm install @astrojs/partytown
astroでのPartytown設定方法
astro.config.*に公式ドキュメント通りに記載します。
import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';
export default defineConfig({
// ...
integrations: [partytown()],
});
Partytown(webワーカー)の注意点：特定のObjectは使用できない
webワーカーは前述したようにメインスレッドとは別のバックグランドのスレッドで処理を実行します。
そのため、windowといった一部のobjectが使用できません。
google tag managerをparty townで利用するには上記に気をつけなければなりませんでした。
Partytownでのgoogle tag managerの設定方法
設定箇所は二箇所あります。
astro.config.*での設定
import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';
export default defineConfig({
// ...
integrations: [
partytown({
config: {
forward: [["dataLayer.push"],"gtm.push"],
},
}),
],
});
フロント部分に記述する内容
今回はlayout.astroに以下を記述します。
layout.astro
<head>
// ・・・・・
<script type="text/partytown">
(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のID");
</script>
// ・・・・・
</head>
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=********" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
// ・・・・・
</body>
上記で設定は完了です！
あとはgoogle chromeのプラグイン(Tag Assistant、DataLayer Checker)やgoogle analytics、検証モードなどを使用してデータが送信されているか確認してみてください。
参考：webワーカーで使用できないObject
- windowオブジェクト
- documentオブジェクト
- parentオブジェクト
※生成AIに聞いたため、もっと調べる必要あるかと思いますが、それはまた別の機会に
参考URL