Optimize ID

[BramDecuypere]

There is no way to do this one?

[alinemorelli]

Sorry, I don't get your question.

[Sajam]

+1

In order to enable Google Optimize with gtag you need to:

gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});

Reference: https://support.google.com/optimize/answer/9183119?authuser=1

Would it be possible to incorporate optimizeId into react-gtm?

[nevolgograd]

+1 So how should i init optimize?

[ihkurylenko]

+1 I faced this issue as well. Is this even possible with your library?

[otaviobonder-deel]

A bit late, but for anybody needing to use Google Optimize, here is the custom hook I made:

import { useEffect, useState } from "react";

const useGoogleOptimize = (id: string): string | undefined => {
  const [googleVariant, setGoogleVariant] = useState<string | undefined>();

  const activate = async () => {
    if (window.dataLayer) {
      await window.dataLayer.push({ event: "optimize.activate" });
    }
    const intervalId = setInterval(() => {
      if (window.google_optimize !== undefined) {
        const variant: string = window.google_optimize.get(id);
        setGoogleVariant(variant);
        clearInterval(intervalId);
      }
    }, 100);
  };

  useEffect(() => {
    activate();
    // eslint-disable-next-line
  }, []);

  return googleVariant;
};

export default useGoogleOptimize;

Then to use it:

const variant = useGoogleOptimize("CONTAINER_ID")

[fherdoiza]

Hi @otaviobps, I have a question, when do you use your Hook?

1. After this point (TagManager.initialize(tagManagerArgs)) or
2. On each component that use GTM events?

[otaviobonder-deel]

Hey @fherdoiza,

The hook was created to get a variant from Google Optmize, so to use it you should already have initialized TagManager (usually I initialize TagManager in the root index.tsx file).

Then, you should use the hook on each component that you need to get a variable from Google Optimize.

You can use it like:

const variant = useGoogleOptimize(YOUR_EXPERIENCE_ID)

variant will have the variant from Google Optimize

[emgk]

If google optimize and analytics isn't loading by GTM (configured with this package) on your website, then most likely you haven't created "History Change" trigger in your google tag manager.

The tag manager's History Change trigger can track all the client-side navigations using React router links

Check here: https://www.learnbestcoding.com/post/22/reactjs-using-google-analytics-tag-manager#Creating-history-change-trigger-in-the-Google-tag-manager-console