Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add cookie consent v3 #825

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

feat: add cookie consent v3 #825

wants to merge 9 commits into from

Conversation

ipeke94
Copy link

@ipeke94 ipeke94 commented Oct 8, 2024

Based on the conversation with Georgios, I added Cookie Consent script from here -> https://github.com/orestbida/cookieconsent?tab=readme-ov-file

Note: We can add German translation version.

Kindly checkout the gif below:

cookie-consent-trial-1234

Copy link

netlify bot commented Oct 8, 2024

Deploy Preview for satellytes ready!

Name Link
🔨 Latest commit 4a07cf0
🔍 Latest deploy log https://app.netlify.com/sites/satellytes/deploys/6710268b0d5f9d00085a6098
😎 Deploy Preview https://deploy-preview-825--satellytes.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 66 (🔴 down 20 from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 93 (no change from production)
PWA: 80 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@ipeke94 ipeke94 marked this pull request as ready for review October 8, 2024 09:08
@ipeke94 ipeke94 requested a review from a team as a code owner October 8, 2024 09:08
@ipeke94 ipeke94 marked this pull request as draft October 8, 2024 09:12
@ipeke94 ipeke94 marked this pull request as ready for review October 8, 2024 09:15
const setLeadinfoCookies = () => {
const twoYears = 63072000;
const sessionValue = new Date().toISOString();
document.cookie = `_li_id=some_value; max-age=${twoYears}; path=/`;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The article explains the nature of the cookies involved. I don't think that we're supposed to set those cookies.
Instead you have to pull in the matching script through the scripts management of the cookie consent js I think ?

https://cookieconsent.orestbida.com/advanced/manage-scripts.html

I'm not sure how to distinguish the two different modes (with cookies and without). Maybe there are two different scripts possible or so?

--> If that's not a given use case to allow both scenarios (cookie and without cookies) then let's enable cookies in the backend and integrate the tracker only when the consent was given. Maybe we find a solution afterwards.

Copy link
Member

@georgiee georgiee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi thanks for the start,
I've provided some feedback regarding the integration.

package.json Show resolved Hide resolved
src/@types/cookieconsent.d.ts Outdated Show resolved Hide resolved
src/components/CookieConsent.tsx Outdated Show resolved Hide resolved
src/components/CookieConsent.tsx Outdated Show resolved Hide resolved
const setLeadinfoCookies = () => {
const twoYears = 63072000;
const sessionValue = new Date().toISOString();
document.cookie = `_li_id=some_value; max-age=${twoYears}; path=/`;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The article explains the nature of the cookies involved. I don't think that we're supposed to set those cookies.
Instead you have to pull in the matching script through the scripts management of the cookie consent js I think ?

https://cookieconsent.orestbida.com/advanced/manage-scripts.html

I'm not sure how to distinguish the two different modes (with cookies and without). Maybe there are two different scripts possible or so?

--> If that's not a given use case to allow both scenarios (cookie and without cookies) then let's enable cookies in the backend and integrate the tracker only when the consent was given. Maybe we find a solution afterwards.

let leadinfoInitialized = false;

const LeadinfoScript = ({ enable }: { enable: boolean }) => {
const [script, setScript] = useState<HTMLScriptElement | null>(null);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as said I think it's easier to use the script manager instead of manually bootstrapping it

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello,

Thank you for the feedback and your time🙏. I tried to block/manage script tags according to the document you sent. You can see some FAQs in my comment below. Accordingly, when we do this, different cookies are set when analytics data is accepted by Leadinfo. The cookies are listed below possibly related to li_id and li_ses cookies in terms of tracking user sessions and identifying visitors. (like Google Analytics(_ga cookies) or HubSpot (__hstc, hubspotutk) or _hssrc session cookie)

Screenshot 2024-10-16 at 10 43 00 PM

Do you think we need to add detailed descriptions of these cookies under analytics or the relevant section?

Comment on lines +6 to +7
leadinfoScript.setAttribute('type', 'text/plain');
leadinfoScript.setAttribute('data-category', 'analytics');
Copy link
Author

@ipeke94 ipeke94 Oct 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the leadInfo side, the cookies are already enabled.

image

As far as I see in the documentation when we add these two attributes, that prevents script execution until consent is given.

Cookies are enabled:

image Screenshot 2024-10-15 at 3 13 10 PM Screenshot 2024-10-15 at 3 18 28 PM

Cookies aren't enabled:

Screenshot 2024-10-15 at 3 11 41 PM Screenshot 2024-10-15 at 3 11 48 PM

@ipeke94 ipeke94 requested a review from georgiee October 15, 2024 13:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants