Cookie consent and Google Analitycs in Angular app

Question

I am trying to add google analytics to my site. Just adding GA is not a problem I can do it with the script below:

 <!-- Google tag (gtag.js) --> <script async
 src="https://www.googletagmanager.com/gtag/js?id=ID"></script>
 <script>   window.dataLayer = window.dataLayer || [];   function
 gtag(){dataLayer.push(arguments);}   gtag('js', new Date()); 
 gtag('config', 'ID'); 
</script>

As I understand it, I can't just add a GA before i get the user's permission to process data via cookies first

So how can I control the flow of GA data after and before consent?

Do I need to store the information in the database that someone has consented to data processing, or is it enough that it is stored in cookies. The next time a user enters the site, I can check if they have accepted the cookie and run GA

score 1 · Answer 1 · answered Aug 22 '22 at 10:22

That's the correct logic: store user consent (cookie, database etc.) and load GA script at the next visit if you have consent.

Most cookie consent tool will use cookies to store user's consent as consent will apply for each user device (phone, desktop). For example, our free cookie consent tool works like this, but you'll find similar other tools.

You load the tool:

<!-- Cookie Consent by TermsFeed https://www.TermsFeed.com -->
<script type="text/javascript" src="//www.termsfeed.com/public/cookie-consent/4.0.0/cookie-consent.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
[CONFIG CODE]
</script>
<!-- End Cookie Consent by TermsFeed https://www.TermsFeed.com -->

You tag your JS scripts so they don't load until user provides consent:

<!-- Google tag (gtag.js) -->
<script type="text/plain" cookie-consent="tracking" src="https://www.googletagmanager.com/gtag/js?id=ID"></script>
<script type="text/plain" cookie-consent="tracking">window.dataLayer = window.dataLayer || []; function
gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); 
gtag('config', 'ID'); 
</script>

Once user has provided consent, you will find the consent stored in cookies: cookie_consent_user_accepted, cookie_consent_level, cookie_consent_user_consent_token.

score 0 · Answer 2 · answered Oct 04 '22 at 12:05

Recently I had the same problem like you and could not find any solution in the internet so I coded my own cookie dialog for Angular.

Instead of loading the google analytics script in the index.html, I defined a script loader which loads the script if the consent dialogue is accepted.

The script loader looks like the following:

public loadScript() {
    let body = <HTMLDivElement> document.body;
    let script = document.createElement('script');
    script.innerHTML = '';
    script.src = 'https://www.googletagmanager.com/gtag/js?id=ENTER TAG';
    script.async = true;
    script.defer = true;
    enter code here`body.appendChild(script);
}

And the full logic if the cookie is accepted is the following:

public accept(): void {
    this.router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
            if (typeof gtag !== 'undefined') {
                gtag('config', 'ENTER TAG', {
                page_path: event.urlAfterRedirects,
          });
        }
      }
    });
    this.loadScript();
    this.googleAnalyticsService.eventEmitter('TEST', 'User visited page', 
    "User visited page" , 'accept dialog', 1);
    this.sharedService.acceptedConsent = true;
    this.setConsent(true);
    this.closePopup = true;}

It works like the following: User clicks accept in the frontend ui, then GA is configured, the necessary script loaded , an event is emitted that shows that a user visited the page and the session storage saves that cookies are allowed and the pop up is closed.

If the user denies the cookies then the scripts are never loaded and no connection is established to Google.

If the user revokes the cookies I set the session storage variable to false and delete all the cookies and reload the page.

Hope I helped you somehow. I made my cookie dialog open source here: https://github.com/eduardfrankford/GoogleAnalytics_CookieDialogue_Angular13

Cookie consent and Google Analitycs in Angular app

2 Answers2