Send data from bubble to GTM to fire GA4

[gianlucabiancardi96]

Hei guys just a quick one,

I d need to send a custom event from bubble to GTM that will in turn send it to GA4 with a Javascript action in the workflow?

How can i do it?

[williamtisdale]

To send a custom event from Bubble to Google Tag Manager (GTM) and then to Google Analytics 4 (GA4), you can use a JavaScript action in your Bubble workflow. Here are the steps you can follow:

1. Set up Google Tag Manager and Google Analytics 4: Make sure you have set up a GTM container and a GA4 property, and that you have integrated them with each other.
2. Set up a custom event trigger in GTM: In GTM, create a custom event trigger that listens for the event you want to track. For example, if you want to track a button click, create a trigger that listens for a “Button Click” event.
3. Set up a GA4 tag in GTM: Create a GA4 tag in GTM that sends data to your GA4 property. Make sure to select the custom event trigger you created in step 2 as the trigger for this tag.
4. Get your GTM container ID: In GTM, go to the “Admin” section and copy your GTM container ID. This will be used in the JavaScript code.
5. Create a JavaScript action in Bubble: In your Bubble workflow, add a new step and select “Run JavaScript” as the action. In the JavaScript code editor, paste the following code, replacing “GTM_CONTAINER_ID” with your actual GTM container ID and “CUSTOM_EVENT_NAME” with the name of the custom event you want to track:

var dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'CUSTOM_EVENT_NAME',
  'gtm.start': new Date().getTime(),
  'event_callback': function() {
    document.location = 'REDIRECT_URL';
  },
  'gtm.containerId': 'GTM_CONTAINER_ID'
});

This code pushes a custom event to the GTM data layer when the JavaScript action is run. The “event” parameter specifies the name of the event, and the “event_callback” parameter is an optional function that can be used to perform additional actions after the event is pushed (such as redirecting the user to another page). Replace “REDIRECT_URL” with the URL you want to redirect the user to after the event is pushed.

6. Trigger the JavaScript action: Finally, add a trigger to your workflow that runs the JavaScript action when the event you want to track occurs. For example, if you want to track a button click, add the JavaScript action as a step in the workflow that runs when the button is clicked.

That’s it! When the JavaScript action is run, it will push a custom event to the GTM data layer, which will in turn trigger the GA4 tag you set up earlier and send the data to your GA4 property.

• “ChatGPT, a language model trained by OpenAI”

[gianlucabiancardi96]

Hei man @williamtisdale
thanks a lot to clarify the doubt So I ve tried like that but seems to not work… I don’t have a Redirect Url (I m not sure i got the point there…)

Have a look of my setting:

Am i wrong somewhere according to you?

[gianlucabiancardi96]

My bad I don t know why but it was not working. Now it is.
So all good thank you man

[spycrow.io]

You can remove the redirect URL part of the code if you don’t use it. I can confirm that everything works as expected.