Google Analyticsの読み込み条件を修正

VOICEVOX · Nov 25, 2024 · 57c9494 · 57c9494
1 parent 5c43cd7
commit 57c9494
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -119,13 +119,15 @@ pnpm run generateThumb
 
 ## TODO
 
+- [ ] ボイボ寮ページで背景が読まれてないかも
+- [ ] Nemo のヘッダーのとこの見た目が変
+- [ ] Nemo の背景が重い
 - [ ] sitemap の比較、dev が含まれてないことを確認
 - [ ] ニュースの RSS？
 - [ ] Bulma の scss が重い
 - [ ] canonical URL が以前と一致することを確認
 - [ ] Google Analytics の疎通チェック
 - [ ] たぶん font-smoothing が効いてないけど macOS でちゃんと動くか確認
-- [ ] Google Analytics を Partytown にしたい issue 作る、sendEvent が Partytown 上からしかできなくなるのをどう解決するか
 
 ## なんとなくのコーディングルールメモ
 

diff --git a/astro.config.ts b/astro.config.ts
@@ -18,11 +18,14 @@ export default defineConfig({
       filter: (page) => !page.includes("/dev/"),
     }),
     react(),
+    /*
+    // ViewTransitions を使う場合gtagがうまく動かない。ページの移動のたびにロードされてしまう。
     partytown({
       config: {
         forward: ["dataLayer.push"], // for `gtag`
       },
     }),
+    */
   ],
 
   vite: {

diff --git a/src/components/Header/index.astro b/src/components/Header/index.astro
@@ -25,7 +25,7 @@ const iconUrl = (await getImage({ src: iconImage, width: 64 })).src;
 
     &.is-black {
       // FIXME: is-blackで影が変わらないBulmaのバグ
-      box-shadow: 0 2px 0 0 hsl(0deg, 0%, 4%);
+      box-shadow: 0 2px 0 0 hsl(0deg, 0%, 4%) !important;
     }
   }
 

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -42,7 +42,6 @@ const {
 } = Astro.props;
 
 const noindex = import.meta.env.PREVIEW || noindex_;
-const isProduction = import.meta.env.PROD;
 
 // imageとimageAltが片方だけ指定されている場合はエラーを出す
 if ((_image == undefined) != (imageAlt == undefined)) {
@@ -55,6 +54,12 @@ const imageUrl = _image
     : (await getImage({ src: _image })).src // importされた画像を取得する
   : undefined;
 const hasImage = imageUrl != undefined && imageAlt != undefined;
+
+// Google Analytics。実際のページ以外では読み込まない。
+const googleAnalyticsSrc =
+  import.meta.env.DEV || import.meta.env.PREVIEW
+    ? undefined
+    : `https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`;
 ---
 
 <html lang="ja" transition:animate="none">
@@ -101,20 +106,18 @@ const hasImage = imageUrl != undefined && imageAlt != undefined;
     <link rel="manifest" href="/site.webmanifest" />
 
     {/* Google Analytics */}
-    <script
-      src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
-    ></script>
-    <script is:inline define:vars={{ isProduction, GA_TRACKING_ID }}>
-      if (isProduction) {
+    <script is:inline src={googleAnalyticsSrc}></script>
+    <script is:inline define:vars={{ GA_TRACKING_ID }}>
+      window.dataLayer = window.dataLayer || [];
+      window.gtag = function gtag(...args) {
+        dataLayer.push(args);
+      };
+      document.addEventListener("astro:page-load", () => {
         if ((navigator.doNotTrack || window.doNotTrack) != "1") {
-          window.dataLayer = window.dataLayer || [];
-          window.gtag = function gtag(...args) {
-            dataLayer.push(args);
-          };
           gtag("js", new Date());
-          gtag("config", `${GA_TRACKING_ID}`);
+          gtag("config", GA_TRACKING_ID);
         }
-      }
+      });
     </script>
 
     <ViewTransitions />

diff --git a/src/pages/dormitory/[characterId]/[...descriptionType].astro b/src/pages/dormitory/[characterId]/[...descriptionType].astro
@@ -18,7 +18,7 @@ export const getStaticPaths = (async () => {
 }) satisfies GetStaticPaths;
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
-import { Image } from "astro:assets";
+import { getImage, Image } from "astro:assets";
 
 import { faHome } from "@fortawesome/free-solid-svg-icons";
 
@@ -30,13 +30,16 @@ import PlayButton from "@components/PlayButton/index.astro";
 
 import { callNameInfos } from "@constants/characterInfos/callNameInfo";
 import { getProductPageUrl } from "@constants/url";
+import backgroundImage from "../images/nc238325.jpg";
 
 const { characterInfo, descriptionType } = Astro.props;
 const characterKey = characterInfo.key;
 const descriptionNames = {
   profile: "プロフィール",
   calls: "呼び方",
 } satisfies Record<(typeof descriptionTypes)[number], string>;
+
+const backgroundImageUrl = `url(${(await getImage({ src: backgroundImage })).src})`;
 ---
 
 <Base
@@ -62,6 +65,7 @@ const descriptionNames = {
                     src={characterInfo.portraitImage}
                     alt={characterInfo.name}
                     width={640}
+                    densities={[1, 1.5, 2]}
                     style={{
                       height: "100%",
                       display: "block",
@@ -244,14 +248,14 @@ const descriptionNames = {
   </div>
 </Base>
 
-<style lang="scss" is:global>
+<style lang="scss" define:vars={{ backgroundImageUrl }} is:global>
   @use "bulma/sass/utilities/mixins" as *;
   @use "bulma/sass/helpers" as *;
 
   @use "@/styles/helper" as *;
 
   .dormitory-character {
-    background-image: url(../images/nc238325.jpg);
+    background-image: var(--backgroundImageUrl);
     background-color: rgba(255, 255, 255, 0.7);
     background-blend-mode: lighten;
     background-size: cover;

diff --git a/src/pages/dormitory/_CharacterCard.astro b/src/pages/dormitory/_CharacterCard.astro
@@ -29,8 +29,9 @@ const href = getDormitoryCharacterPageUrl(characterInfo);
         class="card-image"
         src={characterInfo.bustupImage}
         alt={characterInfo.name}
-        width={256}
-        height={256}
+        width={320}
+        height={320}
+        densities={[1, 1.5, 2]}
         style={{ display: "block", objectFit: "contain" }}
       />
       <div

diff --git a/src/pages/nemo/index.astro b/src/pages/nemo/index.astro
@@ -10,9 +10,11 @@ import SpeakerComponent from "./_SpeakerComponent.astro";
 import { getSpeakerInfo, speakerKeys } from "./constants";
 import shareThumb from "./share.png";
 import teaserImage from "./teaser.png";
+import backgroundImage from "./background.png";
 import voicevoxIconImage from "@/assets/icon.png";
 import { showNemoGuidanceModalAttr, showNemoTermModalAttr } from "@store";
 
+const backgroundImageUrl = `url(${(await getImage({ src: backgroundImage })).src})`;
 const voicevoxIconImageUrl = `url(${(await getImage({ src: voicevoxIconImage })).src})`;
 ---
 
@@ -128,15 +130,19 @@ VOICEVOXの音声合成をアプリケーションやサービスに組み込め
   </main>
 </Base>
 
-<style lang="scss" define:vars={{ voicevoxIconImageUrl }} is:global>
+<style
+  lang="scss"
+  define:vars={{ backgroundImageUrl, voicevoxIconImageUrl }}
+  is:global
+>
   @use "@/styles/helper.scss" as *;
   @use "bulma/sass/utilities/initial-variables" as *;
   @use "bulma/sass/utilities/mixins" as *;
 
   .nemo {
     color: white;
     font-family: "LINE Seed", sans-serif;
-    background-image: url(./background.png);
+    background-image: var(--backgroundImageUrl);
     background-size: cover;
     background-position: top;
 

diff --git a/src/pages/product/[characterId].astro b/src/pages/product/[characterId].astro
@@ -220,6 +220,7 @@ const characterBackgroundColor = characterInfo.lightColor;
                 src={characterInfo.portraitImage}
                 alt={characterInfo.name}
                 height={1280}
+                densities={[1, 1.5, 2]}
                 style={{ display: "block", objectFit: "contain" }}
               />
             </div>

diff --git a/src/pages/talk/_CharacterCard.astro b/src/pages/talk/_CharacterCard.astro
@@ -25,6 +25,7 @@ import "@/styles/helper.scss"; // NOTE: PlayButtonのため
         src={characterInfo.bustupImage}
         alt={characterInfo.name}
         width="320"
+        densities={[1, 1.5, 2]}
         style={{ display: "block", objectFit: "contain", margin: "0 auto" }}
       />
     </a>