📝

GA4,GTM勉強(day2)

2024-08-27

GTMコード貼り付け

AstroではPartytownを用いる。

Partytown（パーティタウン）は、ブラウザで並列処理を行うライブラリです。Service WorkerとWeb Workerを組み合わせてDOM操作を行うことで、Web WorkerからのDOM操作を擬似的にスレッドセーフに行うことができます。これにより、重い処理を裏に回してサイトの読み込みを高速化することができます。

pnpm astro add partytown

export default defineConfig({
  integrations: [
    partytown({
      config: {
        forward: ["dataLayer.push"],
      }
    })
  ],
})

<head>
...

<!-- Google Tag Manager -->
{
    <>
      <!-- Google Tag Manager -->
      <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-XXXXXXXX');</script>
      <!-- End Google Tag Manager -->
    </>
}
</head>

<body class={`page-${Astro.props.pageName}`}>
  {
    <>
      <!-- Google Tag Manager (noscript) -->
      <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
      <!-- End Google Tag Manager (noscript) -->
    </>
  }
  
  ...
</body>

ついでにブログ改修

blockquoteに引用っぽい装飾
コードブロックにhighlight.jsでシンタックスハイライト

進捗は小さい

なかなか勉強時間取れていないけど、チリツモで頑張っていきたい。