src/components/AccessTimer/index.tsx

@@ -107,7 +107,7 @@ export const AccessTimer = ({
                 <T9n t='sign_in_full_game' />
               </SignText>
             </TimerContainer>
-            <SignInBtn onClick={() => logout('saveToken')}>
+            <SignInBtn onClick={() => logout('saveToken')} id='match_register'>
               <T9n t='sign_in' />
             </SignInBtn>
           </AccessTimerContainer>

src/components/PictureInPicture/PiP.tsx

@@ -53,7 +53,7 @@ export const PiP = memo(({ isPlaying, videoRef }: PipProps) => {
   }, [videoRef, isPlaying, user])
 
   return (
-    <PipWrapper>
+    <PipWrapper id='match_video_pic_in_pic'>
       <Icon refIcon='PiP' onClick={togglePip} />
     </PipWrapper>
   )

src/components/SimplePopup/index.tsx

@@ -58,7 +58,10 @@ export const SimplePopup = (props: Props) => {
         {buttonName
         && (
           <Footer>
-            <ScApplyButton onClick={onHandle}>
+            <ScApplyButton
+              onClick={onHandle}
+              id='match_afterlimit_register'
+            >
               <T9n t={buttonName} />
             </ScApplyButton>
           </Footer>

src/components/SmartBanner/index.tsx

@@ -51,6 +51,7 @@ export const SmartBanner = ({ setIsOpenDownload }: SmartBannerProps) => (
         )
         setIsOpenDownload(false)
       }}
+      id='download_app'
     >
       <ScBtnDownload>Download</ScBtnDownload>
     </a>

src/features/AddCardForm/index.tsx

@@ -42,6 +42,7 @@ export const AddCardForm = ({
         <OutlineButton
           type='button'
           onClick={onAddClick}
+          id='personal_cards_add'
         >
           <Icon src='plusIcon' />
           <T9n t='add_card' />

src/features/AuthServiceApp/components/ConfirmPopup/index.tsx

@@ -44,11 +44,11 @@ export const ConfirmPopup = (props: Props) => {
           </ScText>
           <ScText>
             <T9n t='by_clicking' />
-            <ScLink href={`${AUTH_SERVICE}${client.termsLink}`} target='_blank'>
+            <ScLink href={`${AUTH_SERVICE}${client.termsLink}`} target='_blank' id='personal_t_k'>
               <T9n t='terms_and_conditions' />
             </ScLink>&nbsp;
             <T9n t='and' />
-            <ScLink href={`${AUTH_SERVICE}${client.privacyLink}`} target='_blank'>
+            <ScLink href={`${AUTH_SERVICE}${client.privacyLink}`} target='_blank' id='personal_policy'>
               <T9n t='privacy_policy_and_statement' />
             </ScLink>
           </ScText>

src/features/AuthServiceApp/components/Login/index.tsx

@@ -121,7 +121,10 @@ const Login = () => {
               }
             </ButtonSolid>
 
-            <RegisterButton to={`${PAGES.registration}${window.location.search}`}>
+            <RegisterButton
+              to={`${PAGES.registration}${window.location.search}`}
+              id='auth_registration'
+            >
               <T9n t='register' />
             </RegisterButton>
             <ContinueWith t='or_continue_with' />

src/features/AuthServiceApp/components/RegisterPopup/index.tsx

@@ -47,7 +47,11 @@ export const RegisterPopup = (props: Props) => {
           </Text>
         </Body>
         <Footer>
-          <ApplyButton onClick={() => handleModalClose()}>Ok</ApplyButton>
+          <ApplyButton
+            onClick={() => handleModalClose()}
+            id='auth_register_ok'
+          >Ok
+          </ApplyButton>
         </Footer>
       </Wrapper>
     </Modal>

src/features/AuthServiceApp/components/Registration/index.tsx

@@ -131,7 +131,7 @@ const Registration = () => {
           </CheckboxWrapper>
 
           <ButtonsBlock>
-            <ButtonSolid disabled={isSubmitDisabled} type='submit'>
+            <ButtonSolid disabled={isSubmitDisabled} type='submit' id='auth_register'>
               {
                 isFetching
                   ? <ScArrowLoader />

src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx

@@ -152,6 +152,7 @@ export const PackageSelectionStep = () => {
               logout('saveToken')
             }
           }}
+          id='purchase_buy'
         >
           {loader ? (
             <ArrowLoader disabled />

src/features/BuyMatchPopup/components/SelectSubscription/index.tsx

@@ -105,6 +105,7 @@ export const SelectSubscriptionStep = () => {
         <Button
           disabled={!selectedSubscription}
           onClick={onNext}
+          id='purchase_next'
         >
           <T9n t='next_choose' />
         </Button>

src/features/Common/Input/index.tsx

@@ -26,6 +26,7 @@ type Props = {
   disabled?: boolean,
   editIcon?: boolean,
   iconName?: string,
+  id?: string,
   inputWidth?: number,
   label?: string,
   labelAfter?: string,
@@ -54,6 +55,7 @@ export const Input = ({
   editIcon = false,
   error,
   iconName,
+  id,
   inputWidth,
   label,
   labelAfter,
@@ -84,6 +86,7 @@ export const Input = ({
         wrapperHeight={wrapperHeight}
         hasRightIcon={editIcon}
         error={error}
+        id={id}
       >
         <Label>
           <LabelTitle labelWidth={labelWidth} isUserAccountPage={isUserAccountPage}>

src/features/HeaderFilters/components/DateFilter/index.tsx

@@ -48,7 +48,11 @@ export const DateFilter = () => {
         <MonthYear onClick={openDatePicker}>
           {date.month} {' '} {date.year}
         </MonthYear>
-        <DateButton isActive={isOpen} onClick={openDatePicker}>
+        <DateButton
+          isActive={isOpen}
+          onClick={openDatePicker}
+          id='main_calendar'
+        >
           <Icon refIcon='Calendar' color='#fff' />
         </DateButton>
       </MonthWrapper>

src/features/HeaderMenu/index.tsx

@@ -10,7 +10,7 @@ import { HeaderGroup, HeaderLogo } from './styled'
 export const HeaderMenu = () => (
   <HeaderGroup>
     <Search />
-    <Link to={PAGES.home}>
+    <Link to={PAGES.home} id='general_main_page'>
       <HeaderLogo />
     </Link>
     <Menu />

src/features/HomePage/components/Header/index.tsx

@@ -34,6 +34,7 @@ export const Header = () => {
               updateDate()
               resetFilters()
             }}
+            id='general_main_page'
           >
             <HeaderLogo />
           </Link>

src/features/HomePage/components/HeaderFilters/index.tsx

@@ -76,18 +76,21 @@ export const HeaderFilters = () => {
           <ScFilterItem
             className={isActiveFilter('live') ? 'activeLive' : ''}
             onClick={() => checkFilter('live')}
+            id='main_live'
           >
             <T9n t='live' />
           </ScFilterItem>
           <ScFilterItem
             className={isActiveFilter('upcoming') ? 'activeButton' : ''}
             onClick={() => checkFilter('upcoming')}
+            id='main_upcoming'
           >
             <T9n t='upcoming' />
           </ScFilterItem>
           <ScFilterItem
             className={isActiveFilter('completed') ? 'activeButton' : ''}
             onClick={() => checkFilter('completed')}
+            id='main_completed'
           >
             <T9n t='completed' />
           </ScFilterItem>

src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx

@@ -26,13 +26,13 @@ export const LiveMatchPlaylist = () => {
   const sport = getSportLexic(match.sportType)
   return (
     <List>
-      <Item>
+      <Item id='main_watch_live'>
         <SimplePlaylistButton
           to={`/${sport}${PAGES.match}/${match.id}`}
           title={isMobileDevice ? 'watch' : 'watch_live_stream'}
         />
       </Item>
-      <Item>
+      <Item id='main_watch_beginning'>
         <SimplePlaylistButton
           to={`/${sport}${PAGES.match}/${match.id}/?resume=${0}`}
           title='watch_from_beginning'

src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx

@@ -58,7 +58,7 @@ export const MatchPlaylists = forwardRef(
     <List ref={ref}>
       {
         map(playlists, (playlist) => (
-          <Item key={playlist.id}>
+          <Item key={playlist.id} id={`match_watch_${playlist.id}`}>
             <PlayButton
               duration={playlist.duration}
               active={isEqual(playlist, selectedMathPlaylist)}

src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx

@@ -61,12 +61,14 @@ export const PlayersPlaylists = ({
         <Tab
           active={selectedTeam === Teams.TEAM1}
           onClick={() => setSelectedTeam(Teams.TEAM1)}
+          id='match_players_team1'
         >
           <Name nameObj={profile.team1} prefix='abbrev_' />
         </Tab>
         <Tab
           active={selectedTeam === Teams.TEAM2}
           onClick={() => setSelectedTeam(Teams.TEAM2)}
+          id='match_players_team2'
         >
           <Name nameObj={profile.team2} prefix='abbrev_' />
         </Tab>

src/features/MatchSidePlaylists/components/TabEvents/index.tsx

@@ -76,14 +76,16 @@ export const TabEvents = ({
             <Tab
               active={activeStatus}
               onClick={isLiveMatch ? setReversed : setUnreversed}
+              id='match_plays_sort_start'
             />
             <Tab
               active={!activeStatus}
               onClick={isLiveMatch ? setUnreversed : setReversed}
+              id='match_plays_sort_final'
             />
           </Tabs>
           <LikeToggle src={likeImage} onClick={likeToggle} />
-          <Filters active={!isEmptyFilters} onClick={togglePopup}>
+          <Filters active={!isEmptyFilters} onClick={togglePopup} id='match_plays_filter'>
             <HoverTooltip>
               <T9n t='filter_match_events' />
             </HoverTooltip>

src/features/MatchSidePlaylists/components/TabStats/index.tsx

@@ -95,6 +95,7 @@ export const TabStats = () => {
               aria-pressed={selectedTab === Tabs.TEAM1}
               onClick={() => setSelectedTab(Tabs.TEAM1)}
               data-step={Steps.PlayersTab}
+              id='match_stats_team1'
             >
               <TabTitle
                 teamColor={team1.shirt_color}
@@ -125,6 +126,7 @@ export const TabStats = () => {
             <Tab
               aria-pressed={selectedTab === Tabs.TEAM2}
               onClick={() => setSelectedTab(Tabs.TEAM2)}
+              id='match_stats_team2'
             >
               <TabTitle
                 teamColor={team2.shirt_color}
@@ -160,13 +162,13 @@ export const TabStats = () => {
         >
           <SwitchTitle t={switchTitleLexic} />
           <SwitchButton
-            id='switchButton'
+            id='match_stats_cur_final'
             isFinalStatsType={isFinalStatsType}
             onClick={toggleStatsType}
             onMouseOver={isMobileDevice
               ? undefined
               : onMouseOver({
-                anchorId: 'switchButton',
+                anchorId: 'match_stats_cur/_inal',
                 horizontalPosition: 'right',
                 tooltipText: translate(switchButtonTooltipLexic),
               })}

src/features/MatchSidePlaylists/index.tsx

@@ -144,6 +144,7 @@ export const MatchSidePlaylists = ({
             <Tab
               aria-pressed={selectedTab === Tabs.WATCH}
               onClick={() => onTabClick(Tabs.WATCH)}
+              id='match_watch'
             >
               <TabButton>
                 <TabIcon icon='watch' />
@@ -155,6 +156,7 @@ export const MatchSidePlaylists = ({
             <Tab
               aria-pressed={selectedTab === Tabs.EVENTS}
               onClick={() => onTabClick(Tabs.EVENTS)}
+              id='match_plays'
             >
               <TabButton>
                 <TabIcon icon='plays' />
@@ -166,6 +168,7 @@ export const MatchSidePlaylists = ({
             <Tab
               aria-pressed={selectedTab === Tabs.PLAYERS}
               onClick={() => onTabClick(Tabs.PLAYERS)}
+              id='match_players'
             >
               <TabButton>
                 <TabIcon icon='players' />
@@ -178,6 +181,7 @@ export const MatchSidePlaylists = ({
               aria-pressed={selectedTab === Tabs.STATS}
               onClick={() => onTabClick(Tabs.STATS)}
               data-step={Steps.Start}
+              id='match_stats'
             >
               {Boolean(currentStep === Steps.Start && isOpen) && (
                 <Spotlight />

src/features/MatchSwitches/components/ScoreSwitch/index.tsx

@@ -18,6 +18,7 @@ export const ScoreSwitch = () => {
         role='switch'
         onClick={toggleScore}
         aria-checked={!isScoreHidden}
+        id='general_scores'
       >
         <Title t={isMobileDevice ? 'scores' : 'hide_score'} />
         <Icon

src/features/Menu/index.tsx

@@ -39,6 +39,7 @@ export const Menu = () => {
       >
         <Link
           to={`${PAGES.useraccount}/personal-info`}
+          id='general_personal_info'
         >
           <Icon src='userAccount' size='0.95rem' />
         </Link>

src/features/MultiSourcePlayer/components/Settings/index.tsx

@@ -22,7 +22,7 @@ export const Settings = (props: Props) => {
   } = useSettings(props)
   return (
     <Fragment>
-      <SettingsButton onClick={open} />
+      <SettingsButton onClick={open} id='match_video_quality' />
       {
         isOpen && (
           <OutsideClick onClick={close}>

src/features/ProfileCard/index.tsx

@@ -58,6 +58,19 @@ export const ProfileCard = ({ profile }: ProfileType) => {
   const tournamentId = profile.additionalInfo?.tournamentId
   const isPlayerPage = checkPage(PAGES.player)
 
+  const setGoogleAnalylicsID = () => {
+    switch (true) {
+      case checkPage(PAGES.player):
+        return 'player_favourites'
+      case checkPage(PAGES.team):
+        return 'team_favourites'
+      case checkPage(PAGES.tournament):
+        return 'tournament_favourites'
+      default:
+        return ''
+    }
+  }
+
   const isGetHighLightShown = useMemo(() => {
     switch (client.name) {
       case ClientNames.Facr:
@@ -94,7 +107,11 @@ export const ProfileCard = ({ profile }: ProfileType) => {
           </InfoItems>
         </Details>
         <SсBtnWrapper>
-          <FavoriteButton isFavorite={isFavorite} onClick={toggleFavorites}>
+          <FavoriteButton
+            isFavorite={isFavorite}
+            onClick={toggleFavorites}
+            id={setGoogleAnalylicsID()}
+          >
             <StarIcon isFavorite={isFavorite} />
             <T9n t='add_to_favorites' />
           </FavoriteButton>
@@ -108,6 +125,7 @@ export const ProfileCard = ({ profile }: ProfileType) => {
                   },
                   sportType,
                 })}
+                id='player_highlights'
               >
                 <T9n t='get_highlights' />
               </SсGetHighlightBtn>

src/features/ProfileHeader/index.tsx

@@ -65,7 +65,7 @@ export const ProfileHeader = ({
         left={client.styles.logoLeft}
       >
         <HeaderGroup>
-          <Link to={PAGES.home}>
+          <Link to={PAGES.home} id='general_main_page'>
             <HeaderLogo />
           </Link>
 

src/features/Search/index.tsx

@@ -62,6 +62,7 @@ export const Search = () => {
             type='search'
             value={query}
             onChange={onChange}
+            id='general_search'
           />
           {(query || isOpen) && <ClearButton onClick={clearQuery} />}
           {isFetching && (

src/features/SportsFilter/components/SelectSport/index.tsx

@@ -18,7 +18,7 @@ export const SelectSport = ({
   open,
   sport,
 }: SportsFilterProps) => (
-  <ScSportsFilter onClick={onModalOpen}>
+  <ScSportsFilter onClick={onModalOpen} id='main_filters'>
     <ScFilterTitle opacity={sport[0] === 'all_sports' ? 0.5 : 1}>
       <T9n t={
         sport[0] === 'all_sports'

src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx

@@ -54,6 +54,7 @@ export const ControlsMobile = (controlsProps: {props: ControlsPropsExtended}) =>
             <LiveBtn
               onClick={backToLive}
               isLiveTime={isLiveTime}
+              id='main_watch_live'
             >
               <T9n t='live' />
             </LiveBtn>
@@ -68,6 +69,7 @@ export const ControlsMobile = (controlsProps: {props: ControlsPropsExtended}) =>
           <Fullscreen
             onClick={onFullscreenClick}
             isFullscreen={isFullscreen}
+            id='match_video_full_screen'
           />
         </ControlsGroup>
       </ControlsRow>

src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import { ButtonBase, hoverStyles } from '../../../../styled'
 

src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx

@@ -73,6 +73,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
           <PlayStop
             playing={playing}
             onClickCapture={togglePlaying}
+            id='match_video_start_stop'
           />
           {!isLive && !isStorage && (
             <Fragment>
@@ -98,8 +99,8 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
           <PlaybackTime>
             {playBackTime}
           </PlaybackTime>
-          <Backward onClick={rewindBackward}>{REWIND_SECONDS}</Backward>
+          <Backward onClick={rewindBackward} id='match_video_back'>{REWIND_SECONDS}</Backward>
-          <Forward onClick={rewindForward}>{REWIND_SECONDS}</Forward>
+          <Forward onClick={rewindForward} id='match_video_forward'>{REWIND_SECONDS}</Forward>
         </ControlsGroup>
 
         <ControlsGroup>
@@ -112,6 +113,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
             <LiveBtn
               onClick={backToLive}
               isLiveTime={isLiveTime}
+              id='match_video_live'
             >
               <T9n t='live' />
             </LiveBtn>
@@ -128,6 +130,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
           <Fullscreen
             onClick={onFullscreenClick}
             isFullscreen={isFullscreen}
+            id='match_video_full_screen'
           />
         </ControlsGroup>
       </ControlsRow>

src/features/StreamPlayer/components/VolumeBar/index.tsx

@@ -24,7 +24,7 @@ export const VolumeBar = ({
   const progressRef = useSlider({ onChange })
   return (
     <Wrapper>
-      <VolumeButton onClick={onClick} muted={muted} />
+      <VolumeButton onClick={onClick} muted={muted} id='match_video_mute' />
       <VolumeProgressList ref={progressRef}>
         <VolumeProgress value={muted ? 0 : value} />
         <Scrubber value={muted ? 0 : value} />

src/features/StreamPlayer/index.tsx

@@ -155,7 +155,7 @@ export const StreamPlayer = (props: Props) => {
         <CenterControls controlsVisible={centerControlsVisible} playing={playing}>
           {isMobileDevice
             ? <RewindMobile isBackward rewindCallback={rewindBackward} />
-            : <Backward size='lg' onClick={rewindBackward}>{REWIND_SECONDS}</Backward>}
+            : <Backward size='lg' onClick={rewindBackward} id='match_video_screen_back'>{REWIND_SECONDS}</Backward>}
           <PlayStop
             size='lg'
             fullWidth
@@ -165,10 +165,11 @@ export const StreamPlayer = (props: Props) => {
               togglePlaying()
               hideCenterControls()
             }}
+            id='match_video_screen_start_stop'
           />
           {isMobileDevice
             ? <RewindMobile isForward rewindCallback={rewindForward} />
-            : <Forward size='lg' onClick={rewindForward}>{REWIND_SECONDS}</Forward>}
+            : <Forward size='lg' onClick={rewindForward} id='match_video_screen_forward'>{REWIND_SECONDS}</Forward>}
         </CenterControls>
       )}
 

src/features/UserAccount/components/Header/index.tsx

@@ -37,7 +37,7 @@ export const HeaderLogo = styled(Logo)`
 
 export const Header = () => (
   <HeaderStyled>
-    <Link to={PAGES.home}>
+    <Link to={PAGES.home} id='general_main_page'>
       <HeaderLogo />
     </Link>
     <LogoutButton />

src/features/UserAccount/components/LogoutButton/index.tsx

@@ -44,7 +44,7 @@ export const LogoutButton = () => {
   const { logout } = useAuthStore()
 
   return (
-    <Button onClick={() => logout()}>
+    <Button onClick={() => logout()} id='personal_log_out'>
       <ExitIcon />
       <T9n t='logout' />
     </Button>

src/features/UserAccount/components/PersonalInfoForm/index.tsx

@@ -132,6 +132,7 @@ export const PersonalInfoForm = (props: Props) => {
         <PrivacyPolicyLink
           target='_blank'
           href={`${AUTH_SERVICE}${client.termsLink}`}
+          id='personal_t_k'
         >
           <T9n t='terms_and_conditions' />
         </PrivacyPolicyLink>
@@ -139,6 +140,7 @@ export const PersonalInfoForm = (props: Props) => {
           <PrivacyPolicyLink
             target='_blank'
             href={`${AUTH_SERVICE}${client.privacyLink}`}
+            id='personal_policy'
           >
             <T9n t='privacy_policy_and_statement' />
           </PrivacyPolicyLink>

src/features/UserAccount/components/ScoreSwitch/index.tsx

@@ -64,6 +64,7 @@ export const ScoreSwitch = ({ className }: Props) => {
         role='switch'
         onClick={toggleScore}
         aria-checked={isScoreHidden}
+        id='general_scores'
       >
         <Title t='hide_score' />
         <Icon

src/features/UserAccount/index.tsx

@@ -58,14 +58,19 @@ const UserAccount = () => {
                 <StyledLink
                   disabled={user?.profile?.country_code === 'BR'}
                   to={`${PAGES.useraccount}/bank-cards`}
+                  id='personal_cards'
                 >
                   <T9n t='bank_card' />
                 </StyledLink>
-                <StyledLink to={`${PAGES.useraccount}/subscriptions`}>
+                <StyledLink
+                  to={`${PAGES.useraccount}/subscriptions`}
+                  id='personal_subscriptions'
+                >
                   <T9n t='my_subscriptions' />
                 </StyledLink>
                 <StyledLink
                   to={`${PAGES.useraccount}/payment-history`}
+                  id='personal_history'
                 >
                   <T9n t='payment_history' />
                 </StyledLink>

src/features/UserFavorites/index.tsx

@@ -83,6 +83,7 @@ export const UserFavorites = ({ marginTop }: Props) => {
               onFocus={getPosition}
               onMouseOver={getPosition}
               key={`${item.type}_${item.sport}_${item.id}`}
+              id='main_favourites'
             >
               <UserSportFavXWrapper
                 onClick={() => addRemoveFavorite({