Meta Pixel + GA4 Conversion Tracking — Simplified Plan

App: yoyacoo_fe/supplier only
Goal: Fire CompleteRegistration (Meta) + sign_up (GA4) once after email-verified registration (本登録). Nothing else triggers these events.

4 Code Changes

1. NEW — src/types/window.d.ts

Add fbq typing (gtag already typed via @types/gtag.js):

export {};
declare global {
  interface Window {
    fbq?: (...args: unknown[]) => void;
  }
}

2. MODIFY — src/pages/_app.tsx

Load GA4 + Meta Pixel base scripts via next/script (strategy afterInteractive).
Guard each block with if (envVar) so missing IDs don’t break dev.
Don’t touch the existing GoogleTagManager component — separate concern.

const ga4Id = process.env.NEXT_PUBLIC_GA4_ID;
const pixelId = process.env.NEXT_PUBLIC_META_PIXEL_ID;

// Wrap existing return in <> fragment, add:
//   - GA4 loader script + init script   (if ga4Id)
//   - Meta Pixel base snippet            (if pixelId)
// Keep Provider/ErrorSwitch/AuthInitializer tree unchanged.

3. MODIFY — src/pages/register/index.tsx

On email-verified login success (authUiState.status === "LoggedIn"), append registered=1:

void router.push({
  pathname: NEXT_URL.CONTENT_CREATE,
  query: { registered: "1" },
});

Don’t touch the social signup redirect — it doesn’t go through email verification.

4. MODIFY — src/pages/content/create/index.tsx

Add one useEffect:

useEffect(() => {
  if (!router.isReady) return;
  if (router.query.registered !== "1") return;
  if (sessionStorage.getItem("complete_registration_tracked")) return;

  window.fbq?.("track", "CompleteRegistration");
  window.gtag?.("event", "sign_up", { method: "email" });
  sessionStorage.setItem("complete_registration_tracked", "1");

  // Clean URL
  const url = new URL(window.location.href);
  url.searchParams.delete("registered");
  window.history.replaceState({}, document.title, url.pathname + url.search);
}, [router.isReady, router.query]);

Env Vars

Add plaintext to: .env.example, .env.development.local, .env.ci
Add encrypted (via dotenvx set) to: .dotenv/.env.staging.supplier, .dotenv/.env.production.supplier

Encryption requires DOTENV_PRIVATE_KEY — manual step by a developer who has it.

Verification

cd yoyacoo_fe/supplier
yarn typecheck && yarn analyse && yarn build

Manual test: Fresh incognito → register via email → verify link → complete form → should land on /content/create?registered=1 → confirm:

• GA4 DebugView shows sign_up (method: email) once
• Meta Pixel Helper shows CompleteRegistration once
• ?registered=1 disappears from URL

Won’t fire on: reload, direct visit, normal login, social signup.

5. [New Requirement] “Powered by ヨヤクー” Referral Tracking

Objective

Track user acquisitions generated via the “Powered by ヨヤクー” link shown on public pages published by Yoyacoo users. This distinguishes organic/referral traffic generated by user-created content from paid advertising.

UTM Specification

All public pages must render the “Powered by ヨヤクー” link directing to the Yoyacoo home page with the following static parameters:

• Target URL: https://yoyacoo.jp/ (or target WordPress landing page)
• Parameters:
  ?utm_source=poweredby&utm_medium=referral&utm_campaign=public_page

Implementation Notes

• Out of Scope for this specific FE branch: Public page layout changes (as those pages might be rendered by customer-facing apps or a separate template engine). Only the generation of the referral link needs to adopt this structure.
• Traffic Isolation: Ensure these UTM parameters do not conflict with or overwrite conversion pixel/GA4 scripts defined above; they will naturally propagate as campaign attributes in GA4 reports when visitors arrive.