Next.js(React)でGoogleフォーム回答後に任意のページにリダイレクトさせる

きっかけ

• Googleフォームの回答をGAのコンバージョンとして測定したい
• イベントを仕込んだりせずページビューだけでコンバージョンの設定をしたい

前提

• react: 17.0.2
• next: 12.0.8

方針

• Googleフォームをページ内に埋め込みつつ、onLoadイベントでリダイレクト判定させる
  • Googleフォームのiframeを埋め込んだ状態でフォームの回答が行われるとonLoadイベントが走るため、そいつを利用する

実装

以下のようなページ用コンポーネントを作成すれば良い

pages/form.tsx

import { useState } from 'react';
import { useRouter } from 'next/router';

export default function Form() {
  const router = useRouter();
  // 初回表示か否かを判定するステートを定義しておく
  const [isFirst, setIsFirst] = useState(true);

  // フォーム回答後はリダイレクトさせる
  const redirect = () => {
    // 初回表示時はリダイレクトさせない
    if (isFirst) {
      setIsFirst(false);
      return;
    }

    router.push({
      // リダイレクト先のページ
      pathname: `/complete`,
    });
  };

  return (
    // onLoadイベントを設定
    <div onLoad={redirect}>
      <iframe
        title="apply"
        src={process.env.NEXT_PUBLIC_GOOGLE_FORM_URL} // 対象のGoogleフォームURL
        width="640"
        height="2446"
        frameBorder="0"
        marginHeight={0}
        marginWidth={0}
      >
        読み込んでいます…
      </iframe>
    </div>
  );
}

参考にさせていただいた情報

• https://codenote.net/g-suite/4512.html