Next.js serverside rendering

Déclencher un événement navigateur lorsque vous utilisez le rendu serverside avec le framework Next.js

Exemple d'événement déclenché par une interaction utilisateur côté navigateur

Cas d'utilisation exemple : déclencher un view_content event lorsque l'utilisateur fait défiler la page jusqu'à 80%.

import React, { useEffect } from 'react';

const MyPage = () => {
  useEffect(() => {
    let eventTriggered = false; // Indicateur pour suivre si l'événement a été déclenché

    function handleScroll() {
      if (eventTriggered) return; // Si l'événement a déjà été déclenché, ne rien faire

      const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
      if (scrollTop + clientHeight >= scrollHeight * 0.8) {
        if (window.cact) {
          window.cact('trigger', 'my_event_name', {
            myprop1: '1234',
            myprop2: 'abcd',
          }, {
            collectionDomain: "my.firstdomain.com",
            siteId: "1234", 
            sourceKey: "abcd1234",
          });
          eventTriggered = true; // Mettre à jour l'indicateur pour éviter de déclencher l'événement à nouveau
        }
      }
    }

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div>
      {/* Votre contenu rendu côté serveur ici */}
      <script
        dangerouslySetInnerHTML={{
          __html: `
            (function() {
              var tc = document.createElement('script');
              tc.type = 'text/javascript';
              tc.async = true;
              tc.src = 'https://cdn.tagcommander.com/events/sdk.js';
              var s = document.getElementsByTagName('script')[0];
              s.parentNode.insertBefore(tc, s);
            })();
          `
        }}
      />
    </div>
  );
};

export default MyPage;