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:
co-authored by
Claude Opus 5
parent
e7385e8898
commit
e13854e918
@@ -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',
|
||||
|
||||
@@ -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 = [
|
||||
|
||||
@@ -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>[]
|
||||
|
||||
Reference in New Issue
Block a user