leads: new phone number and an amoCRM lead on every call-button click

The published number becomes +7 927 789-60-71 across all four landings —
`contacts` in each `src/data/content.ts`, plus the fallback messages in the
lead endpoints and `src/lib/lead.ts` that spell it out when amoCRM is down.
The `legacy/` reference pages keep the old number: they are the visual
originals, not something that ships.

Tapping the phone button now also creates a lead. It cannot reuse the form
path: a click carries no name and no number, so `callClickSchema` in
`shared/lead.ts` validates the tracking data alone, `LeadService.submitCallClick`
creates a contactless lead tagged `клик по телефону`, and `AmoClient.createLead`
takes an optional `contactId` for it. The mapper's field/note split moved into
`collect()` so both lead kinds share it.

The browser fires this with `sendBeacon` (falling back to `fetch keepalive`),
because the same click hands the page to `tel:` and a plain fetch would be
cut off mid-flight. Duplicates are held down from both ends: one lead per
browser session on the client, four per IP per 30 minutes on the server.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Yuriy Panov
2026-09-09 00:58:15 +06:00
co-authored by Claude Opus 5
parent e7385e8898
commit e13854e918
39 changed files with 1059 additions and 106 deletions
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'
import { contacts } from '../data/content'
import { cx } from '../lib/cx'
import { reportCallClick } from '../lib/lead'
import { ButtonLink, buttonClass } from './Button'
import { PhoneIcon } from './Icons'
@@ -52,6 +53,7 @@ export function MobileActionBar() {
<div className="flex items-center gap-[10px]">
<a
href={contacts.phoneHref}
onClick={reportCallClick}
aria-label={`Позвонить в Экзо Групп по номеру ${contacts.phone}`}
className={buttonClass('call', 'shrink-0', 'min-h-[52px] w-[52px] px-0')}
>
@@ -1,5 +1,6 @@
import logo from '../assets/images/exo-logo.png'
import { contacts, navLinks } from '../data/content'
import { reportCallClick } from '../lib/lead'
import { ButtonLink, buttonClass, headerSize } from './Button'
import { PhoneIcon } from './Icons'
import { Container } from './Layout'
@@ -44,6 +45,7 @@ export function SiteHeader() {
<div className="flex shrink-0 items-center gap-[8px]">
<a
href={contacts.phoneHref}
onClick={reportCallClick}
aria-label={`Позвонить в Экзо Групп по номеру ${contacts.phone}`}
className={buttonClass(
'call',
+2 -2
View File
@@ -7,8 +7,8 @@ import deviceTecar from '../assets/images/device-tecar.webp'
import deviceTherapy from '../assets/images/device-therapy.webp'
export const contacts = {
phone: '+7 939 717-80-80',
phoneHref: 'tel:+79397178080',
phone: '+7 927 789-60-71',
phoneHref: 'tel:+79277896071',
}
export const navLinks = [
+78 -2
View File
@@ -1,10 +1,16 @@
import { utmKeys, type LeadFormId, type LeadInput, type LeadResponse } from '../../shared/lead'
import {
utmKeys,
type CallClickInput,
type LeadFormId,
type LeadInput,
type LeadResponse,
} from '../../shared/lead'
const ENDPOINT = '/api/leads/medical-centers-existing-physio'
const DRAFT_KEY = 'exo_medcenter_lead_draft'
const FALLBACK_ERROR =
'Не удалось отправить форму автоматически. Данные сохранены в браузере — свяжитесь с нами по +7 939 717-80-80.'
'Не удалось отправить форму автоматически. Данные сохранены в браузере — свяжитесь с нами по +7 927 789-60-71.'
/** Query-string UTM tags, forwarded to amoCRM with the lead. */
function collectUtm(): Record<string, string> {
@@ -73,6 +79,76 @@ function saveDraft(payload: LeadInput) {
}
}
/* -------------------------------------------------------------------------- */
/* Клик по кнопке звонка */
/* -------------------------------------------------------------------------- */
const CALL_ENDPOINT = `${ENDPOINT}/call`
const CALL_SENT_KEY = 'exo_medcenter_call_click_sent'
/** Session-scoped so a visitor who redials is still one lead, not three. */
function callAlreadyReported(): boolean {
try {
return sessionStorage.getItem(CALL_SENT_KEY) === '1'
} catch {
// Private-mode browsers throw on access; one extra lead beats none.
return false
}
}
function markCallReported() {
try {
sessionStorage.setItem(CALL_SENT_KEY, '1')
} catch {
// See above.
}
}
/**
* Registers a tap on the phone button as an amoCRM lead.
*
* Fire-and-forget by necessity: the same click hands the page to `tel:`, so the
* request has to outlive the document. `sendBeacon` queues it in the browser
* process itself; `keepalive` is the fallback for the few browsers without it.
* Nothing here may throw or await — the dialler must open instantly.
*/
export function reportCallClick(): void {
if (callAlreadyReported()) return
markCallReported()
const payload: CallClickInput = {
page: window.location.pathname,
referrer: document.referrer || undefined,
utm: collectUtm(),
}
// A Blob, not a string: it is what gives the beacon its JSON content type.
const beacon = new Blob([JSON.stringify(payload)], { type: 'application/json' })
// sendBeacon returns false when the browser refuses to queue the payload, and
// a few throw instead of returning anything. Either way, fetch picks it up.
let queued = false
try {
queued = navigator.sendBeacon?.(CALL_ENDPOINT, beacon) ?? false
} catch {
queued = false
}
if (!queued) {
void fetch(CALL_ENDPOINT, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
keepalive: true,
}).catch((error: unknown) => {
console.warn('Call click endpoint error', error)
})
}
window.dataLayer = window.dataLayer ?? []
window.dataLayer.push({ event: 'medcenter_call_click' })
}
declare global {
interface Window {
dataLayer?: Record<string, unknown>[]