Add google tag & purchase event with donation USD value on successful donation

[divine-comedian]

In Google Analytics we want to be able to count the donation value a user makes as part of our conversion values. This will help us understand more of how users are navigating the website and the behaviour of our traffic.

To achieve this we will need to add a google tag to our code that can send a purchase event and also include the usd value of the donation made. We can follow this guide to setup the purchase event

https://developers.google.com/analytics/devguides/collection/ga4/set-up-ecommerce

We should trigger this event AFTER the user has successfully donated. We'll need to be able to fetch a couple values and map them to corresponding fields in the event data:

• transaction_id = {txHash}
• value = usdValue of Donation
• currency = USD
• coupon = chainName

then in the Items object we should map the following values:

• item_id = projectId
• item_name = projectTitle
• item_category = projectCategory1
• item_category2 = projectCategory2
• etc...

if there's any extra required fields we can leave them blank, empty or with a value of 0

you'll also need the TAG_ID which I'm not sure if it's been set in the env variables already - if you require it just DM me

[kkatusic]

@divine-comedian here is result, please can you check on the google administration is this event saved:

[divine-comedian]

We had a short call regarding this issue and setup some new containers and apps for Giveth staging environment - Kechy has all needed permissions.

He is working on adding appropriate gtag script and will be able to check in debug mode on GTM to make sure the script is being ran correctly on successful donation.

[kkatusic]

@divine-comedian after all problems on staging resolved I test it and it is working.

This two ones are forced event from console, first image is forced events code, second is preview in realtime google analytics:

Third image is showing that "purchase" event has been fired after you made some donation:

Be free to open Giveth staging GA, check in realtime and vercel test link is here

[divine-comedian]

I test this out on the provided vercel link, making a donation and checking the values, it all looks good! This is ready for staging QA once the PR is merged

[kkatusic]

Added google tag event for donation #4400

Thx @divine-comedian for checking. Also to be noticed here, that I added an additional function to implement any custom event along the dApp if someone needed it:

/**
 * Logs a custom event to Google Tag Manager.
 *
 * @param {string} eventName - The name of the event to be logged.
 * @param {ICustomEventParams} params - Additional parameters for the event.
 *
 * This function sends a custom event to Google Tag Manager with the specified event name and parameters.
 */
export const createCustomEventToGTM = (
    eventName: string,
    params: ICustomEventParams,
) => {
    window.gtag('event', eventName, params);
};

[divine-comedian]

@kkatusic is this on production already?

[kkatusic]

@kkatusic is this on production already?

No it is on staging.