Section 10

Googleアナリティクスを設置

Astro Sarkaraのレイアウト内にGoogleアナリティクスを設置する場合、Section 5『レイアウトに要素を注入する』で説明した機能、スロットを活用します。

Googleアナリティクスは<head>要素内の先頭に位置することが推奨されています。Astro Sarkaraレイアウトではtop-of-headのスロットで、<head>要素の最上位にコードを注入することが可能です。

---
import { SarkaraLayout } from "@cieloazul310/astro-sarkara";
import { menu, siteMetadata } from "../data";
---

<SarkaraLayout siteMetadata={siteMetadata} menu={menu}>
  <Fragment slot="top-of-head">
    <!-- Google tag (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id={your_analytics_id}"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        window.dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "{your_analytics_id}");
    </script>
  <Fragment/>
</SarkaraLayout>

Partytownを使う

Partytownはサードパーティースクリプトの処理をサービスワーカーに任せることで読み込み速度を爆速にしてくれるライブラリです。AstroにはPartytownを有効にするインテグレーションが提供されています。これをGoogleアナリティクスと組み合わせて使用することができます。

Partytown

partytown.builder.io

@astrojs/partytown

docs.astro.build

npm install @astrojs/partytown

// astro.config.ts
import { defineConfig } from "astro/config";
import partytown from "@astrojs/partytown";

export default defineConfig({
  integrations: [partytown()],
});

---
import { SarkaraLayout } from "@cieloazul310/astro-sarkara";
import { menu, siteMetadata } from "../data";
---

<SarkaraLayout siteMetadata={siteMetadata} menu={menu}>
  <Fragment slot="top-of-head">
    <!-- Google tag (gtag.js) -->
    <script
      type="text/partytown"
      src="https://www.googletagmanager.com/gtag/js?id={your_analytics_id}"></script>
    <script type="text/partytown">
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "{your_analytics_id}");
    </script>
  <Fragment/>
</SarkaraLayout>

Add google analytics to Astro with Partytown

www.kevinzunigacuellar.com

Tutorial Top

Top