How can i get a custom event to fire in Google Analytics?

Question

easy enough right : )

-react app

-im using import TagManager from "react-gtm-module";

in root.js

 useEffect(() => {
    TagManager.initialize({ gtmId: gtmKey });

    //..........
  },[]);

i show gtm.js firing in the network tab on browser tools, this should mean i'm running

now in my component, trying to access data layer

const GTMSearchEvent = (v) => {
  console.log(v);
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    "event": "search",
    "searchQuery": v,
  });
};

my param "v" is logging so the function is running, just not really able to see any event triggering

i cant seem to find anything in GTM or GA showing this event.

how can i finish implementing? just want to pass the search queries to my analytics/tag mgr

Answer 1

Setting up the dataLayer pushes is just half of the battle. You need to config your GTM container to "listen" for those events and variables.

Setup new variable to track search query (note that you need to name it exactly how you pushed it to the data layer.

Setup new trigger to track the data layer event

After that, you can do whatever you want/need to do. Here's a simple example if you want to capture it as an event (note, the names are arbitrary, pick something that makes sense to you, just note the variable name that I used for the label, you can use this anywhere within GTM.