feat: add feedback feature to self-learning pages

[gabriele-ct]

Description of changes
Adding feedback functionality connected to userguiding to self-learning pages

Link to original ticket
https://github.com/commercetools/commercetools-docs/issues/4637

Link to change (deep-link for reviewing the change)
https://docskit-ga-userguiding-script-injection.commercetools.vercel.app/self-learning-smoke-test/course-1/2-quiz

Screenshot of changes (if applicable)

DoD guidelines

• user documentation added?
• stakeholders approve changes? (if needed)

[changeset-bot]

🦋 Changeset detected

Latest commit: 0f5daae

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@commercetools-docs/gatsby-theme-docs	Minor
@commercetools-website/api-docs-smoke-test	Patch
@commercetools-website/docs-smoke-test	Patch
@commercetools-website/documentation	Patch
@commercetools-website/self-learning-smoke-test	Patch
@commercetools-website/site-template	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🚚 Build Process Details

Preview URLs:

• https://docskit-ga-userguiding-script-injection.commercetools.vercel.app (permalink to the last build of this branch)
• https://docskit-sha-a9201b1418246aeb810ef61ae4eac3cc7f3e58e1.commercetools.vercel.app (this commit)

[gabriele-ct]

@zbalek Would you mind having a look to what implemented so far:
https://docskit-ga-userguiding-script-injection.commercetools.vercel.app/self-learning-smoke-test/course-1/2-quiz

Let me know if you have any observations or you'd like to change anything.
Thank you

[gabriele-ct]

I also did some test throttling the network to see how bad is the UX on the first load.
Here are my findings:

• on a fast connection the modal is pretty much displayed instantaneously
• on a fast 4G connection it takes about 2 seconds
• on a slow 4G connection it can take 6 to 8

The good thing is that the user gets an instantaneously feedback (the thumbs icon changes color) and it doesn't feel too bad to wait a couple of seconds for a feeback popup, I've seen some sites delaying the feedback modal on purpose.
Anyway, let me know your thoughts about it

[zbalek]

Looks great @gabriele-ct! The behavior is as expected.

Re the loading speed: Thanks for checking this! Imho, this is also really good.

Re mobile: I cross-checked the requirements and we actually haven't defined the situation for mobile (which is when users may be the most likely to access the pages using 4G). And so I was wondering if it is possible to only enable the feedback feature only up to a tablet size screen - at least for the MVP. (I tried to test the mobile version (SE) just now and it is breaking a bit.)

---

Can we please increase the margin here from 16 to 24:

[gabriele-ct]

@zbalek could you please have another look? I addressed the points you suggested. Thank you

[zbalek]

@zbalek could you please have another look? I addressed the points you suggested. Thank you

All good now - thank you!

[gabriele-ct]

@FFawzy I haven't been able to reproduce the non loading survey issue, would you mind double check if we're good to merge this?

[FFawzy]

@gabriele-ct .. Unfortunately I can still reproduce it.
it happens for fresh new customers please check the video attached
one more thing, I can't find the google tracker on the thumbs events did I miss it ?

userguiding-bug.mov

[gabriele-ct]

Thank you for finding out the repro path. It helped a lot.
Turns out that when the script loads it creates some items in localstorage, one of them looks like the session id, nothing happens until that is present in the localstorage. I'm therefore waiting for that session id to exists before calling any library method. It seems to be working all the times.

I also added google tag calls. It should be ready for a final review 🙇

[FFawzy]

Pinging @nkuehn as he is defacto the Self Learning stakeholder for this feature.
can you please test out the feature here
https://docskit-ga-userguiding-script-injection.commercetools.vercel.app/self-learning-smoke-test/course-1/2-quiz

Thank you

[nkuehn]

Oh, thanks! I like it a lot, very nice direct user experience.

I looked at the debug / log a bit, too and it seems we're really only loading userguiding when needed.

Did you check with data protection team whether we they have to do something that the cookie consent banner is maybe re-shown again (or, at least that they have documented that we have userguiding on the docs site now)?

[FFawzy]

Oh, thanks! I like it a lot, very nice direct user experience.
I looked at the debug / log a bit, too and it seems we're really only loading userguiding when needed.

Properly specified ✅
properly implemented ✅
🎉

Did you check with data protection team whether we they have to do something that the cookie consent banner is maybe re-shown again (or, at least that they have documented that we have userguiding on the docs site now)?

I'll send them an email to check

[ColinRosati]

Looking good. Just a few small comments

[ColinRosati]

LGTM

[gabriele-ct]

@FFawzy shall we consider this PR "blocked" until we hear back from data protection team?

[FFawzy]

@gabriele-ct we are good to go 🙌

they only needed me to file a report with some details and I did it so we are good to go.