How to implement Google Analytics on Angular 4+ in case of SSR?

Question

css

While building the Angular site, I have already gone through numerous pitfalls and rested on a very large stone that was not liftable for my self-shift, I ask you to help.
Everything was like this:
Made an Angular SPA with a standard client-side-render process. Everything is great, but of course I got problems with SEO and social networks. Remade to server-side-render using Angular Universal. One problem has become less, but now at the stage of implementing Google analytics, I understand that their default script (ga('create', 'UA-ХХХХХХХХ-1', 'auto')) doesn't work at all (server-side-render anyway). I tried to configure nginx to detect search / social robots and their further routing to the server-side version, and users to the client-side, but it didn’t work out - it turned out to be not so easy to define the robot (I can give the config code).
Can you tell me, please, in what direction should I move to solve the problem?
Thank you!

Answer 1

1. Don't forget at the end of the line ,and ;
2. I would recommend getting the values ​​of CSS Properties using the computed value getComputedStyle(elem).display
3. Without markup, it's not so obvious. You, it seems, want the menu to be hidden on itemMenu , and hang up a listener on btnMenu . And there are several of them, namely the whole HTMLCollection. So you need to go through them:

for (let i = 0; i < itemMenu.length; i++) {
  itemMenu[i].onclick = function() {
    if (getComputedStyle(menuHeader).display === 'flex') {
      menuHeader.style.display = 'none';
    } else {
      menuHeader.style.display = 'flex';
    }
    this.classList.toggle('menu-btn_active');
  }
}

Answer 2

Found a solution. Make two versions of the site and route using the nginx config.
Working config:

server {
   listen 80;
   server_name site.ru www.site.ru;

   root   /var/www/site.ru/dist/browser;
   index  index.html;

   location / {
       try_files $uri @prerender;
   }

location @prerender {
    #proxy_set_header X-Prerender-Token YOUR_TOKEN;

    set $prerender 0;
    if ($http_user_agent ~* ("Googlebot\/2.1|YandexBot|googlebot|yahoo|bingbot|baiduspider|yandex|yeti|yodaobot|gigabot|ia_archiver|facebookexternalhit|twitterbot|developers\.google\.com|spider|crawl|slurp|bot")) {
        set $prerender 1;
    }
    if ($args ~ "_escaped_fragment_") {
        set $prerender 1;
    }

    #if ($http_user_agent ~ "Prerender") {
    #    set $prerender 0;
    #}
    #if ($uri ~ "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff)") {
    #    set $prerender 0;
    #}

    #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
    resolver 8.8.8.8;

    if ($prerender = 1) {
  proxy_pass http://XX.XXX.XXX.XXX:4002;

    }
    if ($prerender = 0) {
        rewrite .* /index.html break;
    }
}
}

Answer 3

so and what with routing did not work out?