From e3a36e7cf363576f2a29186711962b644ef62424 Mon Sep 17 00:00:00 2001 From: Awakich Date: Tue, 31 Mar 2026 11:57:43 +0300 Subject: [PATCH 1/3] add cookie consent banner with conditional analytics loading --- .../src/app/app.component.html | 1 + .../social_platform/src/app/app.component.ts | 3 +- .../app/office/services/analytics.service.ts | 61 ++++++++++ .../components/button/button.component.scss | 5 + .../cookie-consent.component.html | 35 ++++++ .../cookie-consent.component.scss | 43 ++++++++ .../cookie-consent.component.ts | 49 +++++++++ projects/social_platform/src/index.html | 104 ------------------ 8 files changed, 196 insertions(+), 105 deletions(-) create mode 100644 projects/social_platform/src/app/office/services/analytics.service.ts create mode 100644 projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html create mode 100644 projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.scss create mode 100644 projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.ts diff --git a/projects/social_platform/src/app/app.component.html b/projects/social_platform/src/app/app.component.html index a7f3b4aeb..7949e8583 100644 --- a/projects/social_platform/src/app/app.component.html +++ b/projects/social_platform/src/app/app.component.html @@ -7,3 +7,4 @@ > + diff --git a/projects/social_platform/src/app/app.component.ts b/projects/social_platform/src/app/app.component.ts index 861f9e768..3eb247d55 100644 --- a/projects/social_platform/src/app/app.component.ts +++ b/projects/social_platform/src/app/app.component.ts @@ -19,6 +19,7 @@ import { MatProgressBarModule } from "@angular/material/progress-bar"; import { AsyncPipe, NgIf } from "@angular/common"; import { TokenService } from "@corelib"; import { LoadingService } from "@office/services/loading.service"; +import { CookieConsentComponent } from "@ui/components/cookie-consent/cookie-consent.component"; /** * Корневой компонент приложения @@ -31,7 +32,7 @@ import { LoadingService } from "@office/services/loading.service"; templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"], standalone: true, - imports: [NgIf, MatProgressBarModule, RouterOutlet, AsyncPipe], + imports: [NgIf, MatProgressBarModule, RouterOutlet, AsyncPipe, CookieConsentComponent], }) export class AppComponent implements OnInit, OnDestroy { constructor( diff --git a/projects/social_platform/src/app/office/services/analytics.service.ts b/projects/social_platform/src/app/office/services/analytics.service.ts new file mode 100644 index 000000000..97b56f0cd --- /dev/null +++ b/projects/social_platform/src/app/office/services/analytics.service.ts @@ -0,0 +1,61 @@ +/** @format */ + +import { Injectable } from "@angular/core"; + +@Injectable({ + providedIn: "root", +}) +export class AnalyticsService { + private loaded = false; + + loadAnalytics(): void { + if (this.loaded) return; + if (window.location.hostname !== "app.procollab.ru") return; + + this.loaded = true; + this.loadYandexMetrika(); + this.loadMailRuCounter("3622531"); + + if (window.location.href === "https://app.procollab.ru/auth/register") { + this.loadMailRuCounter("3543687"); + } + } + + private loadYandexMetrika(): void { + const w = window as any; + w.ym = + w.ym || + function (...args: any[]) { + (w.ym.a = w.ym.a || []).push(args); + }; + w.ym.l = new Date().getTime(); + + const script = document.createElement("script"); + script.async = true; + script.src = "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js"; + document.head.appendChild(script); + + w.ym(91871365, "init", { + clickmap: true, + trackLinks: true, + accurateTrackBounce: true, + webvisor: true, + trackHash: true, + }); + } + + private loadMailRuCounter(id: string): void { + const w = window as any; + const tmr = (w._tmr = w._tmr || []); + tmr.push({ id, type: "pageView", start: new Date().getTime() }); + + if (document.getElementById("tmr-code")) return; + + const script = document.createElement("script"); + script.type = "text/javascript"; + script.async = true; + script.id = "tmr-code"; + script.src = "https://top-fwz1.mail.ru/js/code.js"; + document.head.appendChild(script); + } +} diff --git a/projects/social_platform/src/app/ui/components/button/button.component.scss b/projects/social_platform/src/app/ui/components/button/button.component.scss index 01f70b2c2..8a27939b0 100644 --- a/projects/social_platform/src/app/ui/components/button/button.component.scss +++ b/projects/social_platform/src/app/ui/components/button/button.component.scss @@ -13,6 +13,11 @@ border-radius: var(--rounded-xxl); transition: all 0.2s; + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + &.button--inline { font-weight: 400; color: var(--white); diff --git a/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html new file mode 100644 index 000000000..400c624e8 --- /dev/null +++ b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html @@ -0,0 +1,35 @@ + + +@if (visible) { +
+

+ мы используем файлы cookie для аналитики и улучшения сайта +

+ +
+
+ + я согласен +
+ +
+ + принять + + + отклонить + +
+
+
+} diff --git a/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.scss b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.scss new file mode 100644 index 000000000..a43c767a3 --- /dev/null +++ b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.scss @@ -0,0 +1,43 @@ +/** @format */ + +.cookie-consent { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 9999; + max-width: 320px; + padding: 24px; + background-color: var(--light-white); + border: 0.5px solid var(--gray); + border-radius: var(--rounded-lg); + + &__text { + margin: 0 0 12px; + color: var(--dark-gray); + } + + &__controls { + display: flex; + flex-direction: column; + gap: 10px; + } + + &__label { + display: inline-flex; + align-items: center; + gap: 10px; + cursor: pointer; + color: var(--dark-gray); + } + + &__buttons { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + + app-button { + flex: 1; + } + } +} diff --git a/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.ts b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.ts new file mode 100644 index 000000000..d251c24fa --- /dev/null +++ b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.ts @@ -0,0 +1,49 @@ +/** @format */ + +import { Component, OnInit } from "@angular/core"; +import { CheckboxComponent } from "@ui/components/checkbox/checkbox.component"; +import { ButtonComponent } from "@ui/components/button/button.component"; +import { AnalyticsService } from "../../../office/services/analytics.service"; + +@Component({ + selector: "app-cookie-consent", + templateUrl: "./cookie-consent.component.html", + styleUrl: "./cookie-consent.component.scss", + standalone: true, + imports: [CheckboxComponent, ButtonComponent], +}) +export class CookieConsentComponent implements OnInit { + visible = false; + accepted = false; + + private readonly storageKey = "cookieConsent"; + + constructor(private analyticsService: AnalyticsService) {} + + ngOnInit(): void { + const consent = localStorage.getItem(this.storageKey); + + if (consent === "accepted") { + this.analyticsService.loadAnalytics(); + } else { + this.visible = true; + } + } + + onAcceptedChange(value: boolean): void { + this.accepted = value; + } + + confirm(): void { + if (!this.accepted) return; + + localStorage.setItem(this.storageKey, "accepted"); + this.analyticsService.loadAnalytics(); + this.visible = false; + } + + decline(): void { + localStorage.setItem(this.storageKey, "declined"); + this.visible = false; + } +} diff --git a/projects/social_platform/src/index.html b/projects/social_platform/src/index.html index ca86ef945..23f5efbe5 100644 --- a/projects/social_platform/src/index.html +++ b/projects/social_platform/src/index.html @@ -15,110 +15,6 @@ rel="stylesheet" /> - - - - - - - - - - - - - - From da5d54f2c68939dcd632fe4806d33cfe3d59260e Mon Sep 17 00:00:00 2001 From: Awakich Date: Tue, 31 Mar 2026 12:04:58 +0300 Subject: [PATCH 2/3] fix formatting in button and cookie-consent component styles --- .../src/app/ui/components/button/button.component.scss | 2 +- .../cookie-consent/cookie-consent.component.scss | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/projects/social_platform/src/app/ui/components/button/button.component.scss b/projects/social_platform/src/app/ui/components/button/button.component.scss index 8a27939b0..1b8f6b5f0 100644 --- a/projects/social_platform/src/app/ui/components/button/button.component.scss +++ b/projects/social_platform/src/app/ui/components/button/button.component.scss @@ -14,8 +14,8 @@ transition: all 0.2s; &:disabled { - opacity: 0.5; cursor: not-allowed; + opacity: 0.5; } &.button--inline { diff --git a/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.scss b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.scss index a43c767a3..5a735513b 100644 --- a/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.scss +++ b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.scss @@ -2,8 +2,8 @@ .cookie-consent { position: fixed; - bottom: 20px; right: 20px; + bottom: 20px; z-index: 9999; max-width: 320px; padding: 24px; @@ -24,17 +24,17 @@ &__label { display: inline-flex; - align-items: center; gap: 10px; - cursor: pointer; + align-items: center; color: var(--dark-gray); + cursor: pointer; } &__buttons { display: flex; + gap: 10px; align-items: center; justify-content: space-between; - gap: 10px; app-button { flex: 1; From 82f3c334318e352a4872118affd5e023d1b6523b Mon Sep 17 00:00:00 2001 From: Awakich Date: Tue, 31 Mar 2026 12:39:48 +0300 Subject: [PATCH 3/3] fix format of tags --- .../src/app/app.component.html | 2 +- .../cookie-consent.component.html | 52 +++++++++---------- 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/projects/social_platform/src/app/app.component.html b/projects/social_platform/src/app/app.component.html index 7949e8583..ece9b1d56 100644 --- a/projects/social_platform/src/app/app.component.html +++ b/projects/social_platform/src/app/app.component.html @@ -7,4 +7,4 @@ > - + diff --git a/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html index 400c624e8..f6a180b3a 100644 --- a/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html +++ b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html @@ -1,35 +1,33 @@ @if (visible) { -
-

- мы используем файлы cookie для аналитики и улучшения сайта -

+
+

мы используем файлы cookie для аналитики и улучшения сайта

-
-
- - я согласен -
+
+
+ + я согласен +
-
- - принять - - - отклонить - -
+
+ + принять + + + отклонить +
+
}