Request to add CSS #ID's to success cases

[ahmadabugosh]

Hey @MoeNick and team,

Problem As I have started to set up Analytics tracking for our site, I noticed that it's a bit hard to track conversion events from our platform due to how our website CSS is structured. Since we don't use CSS ID's in any of our "success cases" (such as a successful donation, or project creation), I had to manually take the CSS class selector instead.

See below what I mean:

If I want to detect if a Donation is made as an Analytics event, I have to create an event that says "if this element with the following CSS class is visible, then a Donation took place".

This works, however, if we ever change the CSS selector for any reason it would stop counting those events.

For example, now when a donation takes place, I check if "Element Visible = true" for the CSS selector"h4.sc-hAZoDl.sc-de5ab0a6-2.bwTdqR.kQxyye"

Solution

What I recommend is to start adding CSS ID's to each of the success cases. For example, on the place where it says "You're a giver now!" make the CSS be something like

<h4 id="donation-success">You're a giver now!</h4>

We should then add ID's for all of our "success messages" on the platform, including:

• Donation success
• Project creation
• Project verification submitted
• GIVfarm staking
• GIVpower staking
• GIVpower boosting (when it's active)
• Any other or new success cases.

In short, I think it should be added to the dev pipeline to always add an ID to success messages, that way it would be very easy to track those actions in Analytics and define goals and conversion rates.