Fix - Refactor attribute id to data selector to fix duplicate ids

[Morsey187]

Description

Link to sample test page: https://foundation.mozilla.org/en/privacynotincluded/
Related PRs/issues: #11605

Swaps use of ID attributes for data attributes on the donate button to allow multiple instances to fix html validation errors of Duplicate IDs. can test localhost:8000/en/privacynotincluded/ with a nu html validator to verify.

Note: This also fixes a bug I noticed where donation button clicks were only being tracked for mobile (i.e. no clicks on the donation button in the desktop navigation bar are currently being tracked) as the querySelector in header-donate-button.js queries for one element. This might be worth forwarding to someone in your SEO team to make sure it doesn’t skew or cause confusion with any active tracking, campaigns etc.

Checklist

Tests

• Is the code I'm adding covered by tests?

Changes in Models:

• Did I update or add new fake data?
• Did I squash my migration?
• Are my changes backward-compatible. If not, did I schedule a deploy with the rest of the team?

Documentation:

• Is my code documented?
• Did I update the READMEs or wagtail documentation?

Merge Method
💡❗Remember to use squash merge when merging non-feature branches into main

┆Issue is synchronized with this Jira Story

[mmmavis]

I'm gonna keep this PR on for now as I need to talk to the team to see if #donate-header-btn is used for our GTM. If we do, then there will be extra step on getting this merged and deployed to prod.

[mmmavis]

Hey @nancyt1 , can I get some help here? I need to find out if the id #donate-header-btn is being used on GTM and wonder what the best way is to do so? I went to Tag Manager's Trigger section and searched for donate to see if anything is using that id. Is this how you normally look things up?

[nancyt1]

@mmmavis Yes the trigger section is where i would look and I double checked in the tags section too but I didn't find anything explicitly using that ID.

[mmmavis]

@nancyt1 Thank you for checking!

[mmmavis]

PR looks good to me. Thank you!