on-new-buttons.ts

export const initObserver = (root: HTMLElement) => {
  const dataset = {
    ga: "data-ga",
    inspect: "data-inspect",
  };

  const observer = new MutationObserver((params) => {
    params.forEach((node) => {
      if (!(node.target as any).querySelectorAll) return [];
      const htmlElement: HTMLElement = node.target as any;
      const buttonsWithGaFlag: HTMLButtonElement[] = Array.from(
        htmlElement.querySelectorAll(
          `button[${dataset.ga}]:not(${dataset.inspect})`
        )
      );

      buttonsWithGaFlag.forEach((button) => {
        const gaMetric = button.dataset.ga!;
        const hasInspect = button.dataset.inspect!;

        if (hasInspect) {
          return;
        }

        button.addEventListener("click", () => {
          console.log(`Push ${gaMetric} to GA`);
        });
        button.setAttribute(dataset.inspect, "true");
      });
    });
  });

  observer.observe(root, {
    attributes: true,
    childList: true,
    subtree: true,
  });
};