Как реализовать Google Analytics на Angular 4+ в случае SSR?
Собирая сайт 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, но ничего не вышло - определить робота оказалось не так то просто (могу привести код конфиги).
Подскажите, пожалуйста, в какую сторону нужно двигаться для решения проблемы?
Спасибо!
не совсем хорошее решение, поскольку трудно будет внедрять бизнес логику, лучше разделить на 2 модуля serverModule, browserModule на самом верхнем уровне и провайдить нужные сервисы (которые инжектят скрипты) только в browserModule
К сожалению, в настройках 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
Когда client-side render запускаю - консоль показывает и в google analytics вижу +1 посетитель, а когда делаю билд для прода и переношу на сервер -
консоль уже ничего не показывает и google analytics не откликается.
Попробовал решение по ссылке - все также.
В решении по ссылке скорее всего все останавливается на шаге
isPlatformBrowser(this.platformId)
Так как вылетает false (ведь рендирит сервер) алгоритм дальше не идет
Наверно можно с помощью nginx, но это нужно всех роботов обходить.. они же не ограничиваются поисковиками
Средний
