Skip to content

Commit

Permalink
Google Analyticsの読み込み条件を修正
Browse files Browse the repository at this point in the history
  • Loading branch information
Hiroshiba committed Nov 25, 2024
1 parent 5c43cd7 commit 08489bb
Show file tree
Hide file tree
Showing 6 changed files with 36 additions and 19 deletions.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 上からしかできなくなるのをどう解決するか

## なんとなくのコーディングルールメモ

Expand Down
3 changes: 3 additions & 0 deletions astro.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,14 @@ export default defineConfig({
filter: (page) => !page.includes("/dev/"),
}),
react(),
/*
// ViewTransitions を使う場合gtagがうまく動かない。ページの移動のたびにロードされてしまう。
partytown({
config: {
forward: ["dataLayer.push"], // for `gtag`
},
}),
*/
],

vite: {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
27 changes: 15 additions & 12 deletions src/layouts/Base.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand All @@ -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">
Expand Down Expand Up @@ -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 />
Expand Down
9 changes: 6 additions & 3 deletions src/pages/dormitory/[characterId]/[...descriptionType].astro
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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
Expand Down Expand Up @@ -244,14 +247,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;
Expand Down
10 changes: 8 additions & 2 deletions src/pages/nemo/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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})`;
---

Expand Down Expand Up @@ -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;

Expand Down

0 comments on commit 08489bb

Please sign in to comment.