Как реализовать Google Analytics на Angular 4+ в случае SSR?

Question

[Slimlink3]

Собирая сайт Angular уже прошел многочисленные подводные камни и уперся на очень большом и не подъемном для моего самостоятельного сдвига камне, прошу вас помочь.
Все было так:
Сделал SPA на Angular со стандартным client-side-render процессом. Все супер, но само собой получил проблемы с SEO и социальными сетями. Переделал на server-side-render с помощью Angular Universal. Одной проблемой стало меньше, но теперь на этапе внедрения аналитики от гугла, понимаю что их дефолтный скрипт (ga('create', 'UA-ХХХХХХХХ-1', 'auto')) ну никак не работает (server-side-render же как никак). Попробовал значит настроить nginx на определение поисковых/социальных роботов и их дальнейшей маршрутизации к server-side версии, а пользователей к client-side, но ничего не вышло - определить робота оказалось не так то просто (могу привести код конфиги).
Подскажите, пожалуйста, в какую сторону нужно двигаться для решения проблемы?
Спасибо!

Answer 1

[Slimlink3]

Нашел решение. Сделать две версии сайта и с помощью nginx конфига маршрутизировать.
Рабочий конфиг:

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;
    }
}
}

Comments

[Даша Циклаури]

не совсем хорошее решение, поскольку трудно будет внедрять бизнес логику, лучше разделить на 2 модуля serverModule, browserModule на самом верхнем уровне и провайдить нужные сервисы (которые инжектят скрипты) только в browserModule

Answer 2

[Dimonchik]

так а что с маршрутизацией не вышло?

Comments

[Slimlink3]

К сожалению, в настройках nginx не силен, поэтому получилось настроить только такую конструкцию:

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|yahoo|bingbot|baiduspider|yandex|yeti|yodaobot|gigabot|ia_archiver|facebookexternalhit|twitterbot|developers\.google\.com") {
        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) {

        #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
        set $prerender "11.111.111.111:4002";
        rewrite .* /$scheme://$host$request_uri? break;
        proxy_pass http://$prerender;
    }
    if ($prerender = 0) {
        rewrite .* /index.html break;
    }
}
}

На деле она не распознает и не маршрутизирует роботов. Копаясь дальше подумал, что в будущем буду сильно зависеть от изменений алгоритма определения роботов и оставил это дело.
Но если подскажите, как можно скорректировать код буду безмерно благодарен!

Вчера искал решения на уже готовых сайтах сделанных на angular и нашел, что они каким-то образом вставили google analytics и отрисовали содержимое сайта...
Пример:
cps.edu/Pages/home.aspx
В исходном коде:

<script type="text/javascript" language="javascript">
  (function() {
    var cx = '004477510677988171468:y_acyhcvrr0';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
 </script>

Пробовал по аналогии вставить код в ngAfterViewInit():

let scriptId = 'google-analytics';
    var s = document.createElement('script') as any;
        s.type = "text/javascript";
        s.id = scriptId;
        s.innerText =
            `
             var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-11111111-1']);
  _gaq.push(['_trackPageview']);
  _gaq.push(['_trackPageLoadTime']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

Но тоже в случае SSR не работает.

Также нашел много сайтов, которые кажется просто забили на seo:
ttps://www.toyotacertified.com

[Dimonchik]

основной вопрос - консоль Хрома - показывает, что данные в аналитикс уходят или нет?

и с этим пробовали не вышло?

[Dimonchik]

про юзерагенты лень сейчас смотреть, вероятно, есть ошибка, нгинксом точно можно разрулить

[Slimlink3]

Когда client-side render запускаю - консоль показывает и в google analytics вижу +1 посетитель, а когда делаю билд для прода и переношу на сервер -
консоль уже ничего не показывает и google analytics не откликается.

Попробовал решение по ссылке - все также.
В решении по ссылке скорее всего все останавливается на шаге
isPlatformBrowser(this.platformId)
Так как вылетает false (ведь рендирит сервер) алгоритм дальше не идет

Наверно можно с помощью nginx, но это нужно всех роботов обходить.. они же не ограничиваются поисковиками