実装ガイド

React / Next.js 統合

モダンなライフサイクルフックでTagticsを統合します。クライアントがルート変更を自動で処理します。

初期化

アプリのマウント時に init を、アンマウント時に destroy を呼び出してメモリリークを防ぎます。

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.tagtics.online/client.js';
    script.async = true;
    script.onload = () => {
      window.Tagtics?.init({ apiKey: 'YOUR_API_KEY' });
    };
    document.body.appendChild(script);

    return () => {
      window.Tagtics?.destroy();
      script.remove();
    };
  }, []);

  return <YourApp />;
}

実装ガイド

React / Next.js 統合

モダンなライフサイクルフックでTagticsを統合します。クライアントがルート変更を自動で処理します。

初期化

アプリのマウント時に init を、アンマウント時に destroy を呼び出してメモリリークを防ぎます。

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.tagtics.online/client.js';
    script.async = true;
    script.onload = () => {
      window.Tagtics?.init({ apiKey: 'YOUR_API_KEY' });
    };
    document.body.appendChild(script);

    return () => {
      window.Tagtics?.destroy();
      script.remove();
    };
  }, []);

  return <YourApp />;
}