datalayer | Output page meta data for client-side availability

While it should be a few minutes job, it took me more than 10 hours trying to figure out why the following snippet is working but not as expected, although the site doesn't use ajax for add_to_cart events.

For a very wierd reason the page refreshes when the code is active. I realize this because the log in the console(added_to_cart) disappears after a few moments of loading. The wierd thing is that it has nothing to do with the hook that i'm using(although i also tried woocommerce_add_to_cart_validation with the exact same results) because if i leave only the console.log message it doesn't have the same behavior. It's like the gtag script is forcing a page reload.

Normally this shouldn't be an issue because the event is actually sent to google ads, however there are other scripts that should run afterwards which do not(such as google analytics and others).

Say I have the following dataLayer:

I want to increase the Sample Rate for Page Timings from 1% to 10% in google analytics.

We are using Global site tag (gtag.js) for adding GA to our site.

Following is current config:

To begin with this is my HTML:

My contact form has this Format:

My website is a single page app (SPA) that never changes browser history or the page title. Therefore, it's my understanding that I have two options if I want to capture page_view events:

1. Add browser history and a unique title for every virtual page.
2. Manually fire a page_view in SPA code.

I'm going with option 2.

I've read numerous articles on how to do this, and they tend to converge on similar advice, but they're always a little different from each other. This is probably because most were written soon after GA4's release. After trying most of the steps in these articles, I'm not convinced I've set up virtual pageviews correctly. Unfortunately, the official documentation provides little guidance:

Alternatively, you can always explicitly set page parameters when sending a page_view event to ensure accuracy and clarity.

When it comes to the official documentation, I've only been able to find guidance on doing this with gtag.js, but I'm not using that. I'm using Google Tag Manager (GTM). Here are the steps I've taken and my rationale for taking them (besides an article telling me to do so). After this list, I'll explain why I think it's not working correctly.

1. Login to GTM
2. Create a Google Analytics GA4 Configuration but uncheck "Send a page view event when this configuration loads". I do this because, if I'm going to manually send page_view events, I don't want this configuration to send a duplicate.
3. Create a custom event trigger named "Page Loaded". This allows me to control when I fire this trigger. There's nothing special about it yet. Here's how it looks:
4. On my SPA, I add this line above the GTM tag in the : ...

I used gatsby-plugin-google-gtag earlier in my gatsby project to add 2 Google Analytics tracking ID and it was working fine but unfortunately, my project already has gatsby-plugin-google-analytics which doesn't support multiple tracking ID like the gtag plugin shows in docs. So I found an article where they say to put it inside the html.js file so in the docs here of Customizing-html.js i copied my file to src/ using cp .cache/default-html.js src/html.js now I want to know where to put the script which I got from google analytics... Also, I have react-helmet installed.. so which way to use to put script?

1. manually in head? like so -

I have an HTML code that has only one line of code:

I tried below code to get a http response from kaggle.com. Kaggle response is in html format and I wanted to convert it to json format for the ease of further processing.