Бутонът за докладване, който ви казва, че сайтът ви е счупен, преди клиентите да се откажат

Представете си малък SaaS инструмент в един вторник следобед. Прави се deploy, дадена стойност в конфигурацията е грешна, и формулярът за регистрация започва да дава грешка за всички. Нищо не се срива шумно. Сървърът работи, началната страница се зарежда, а таблото за управление изглежда нормално за екипа, защото те вече са влезли в системата. В продължение на три часа всеки нов посетител попада на неработещ формуляр, вдига рамене и си тръгва. Собственикът разбира същата вечер — от един-единствен раздразнен туит. Това е тихият начин, по който уебсайтовете губят пари. Не драматичен срив, а малка повреда, която само посетителите виждат, а те почти никога не ви казват. Те предполагат, че някой вече знае. Предполагат, че проблемът е в тяхната собствена връзка. Най-често те просто продължават напред. ## Проблемът: вие разбирате последни Когато нещо се счупи в работещ сайт, хората, които забелязват първи, са тези, които най-малко могат да го поправят: вашите посетители. Между тях и вашите разработчици стои стена от триене. За да докладва за бъг, един посетител обикновено трябва да намери страницата ви за контакти, да разбере кой имейл да използва, да опише технически проблем със свои думи и да си спомни на коя страница е бил. Почти никой не прави всичко това за компания, за която не работи. Така че докладът никога не пристига. Вашият мониторинг може да хване пълен срив на сървъра, но рядко хваща счупен бутон, формуляр, който се проваля само в Safari, плащане, което дава грешка само при прилагане на купон, или изображение, което връща 404 на страница за един продукт. Тези 'частични' повреди са често срещани, невидими са отвътре и точно те ви струват регистрации и продажби. Проблемът не е технически. Той е човешки. Трябва да направите докладването на проблем толкова лесно, че дори леко раздразнен непознат действително да го направи. ## Решението: предварително попълнен бутон 'Докладвай за проблем' Добавете малък, винаги видим бутон **Докладвай за проблем** към вашия сайт — във футъра, в ъгъла и особено на екраните за грешка и празно състояние. Вместо да сочи към форма за контакт, това е `mailto:` линк, който отваря собственото имейл приложение на посетителя с вече написано за него съобщение. Посетителят кликва веднъж. Имейл приложението му се отваря с вашия dev екип в полето До, ясна тема и кратко шаблонно тяло. Те пишат един ред за това какво се е объркало и натискат изпрати. Това е цялото взаимодействие — без формуляри, без влизане, без акаунт. Ето линка зад бутона: ```html <a href="mailto:[email protected]?subject=Site%20problem%20reported&body=What%20I%20was%20doing%3A%0AWhat%20went%20wrong%3A%0A%0APage%3A%0ABrowser%3A"> Докладвай за проблем </a> ``` Генераторът на този сайт изгражда и кодира този линк вместо вас, така че забравен интервал или скоба никога да не го счупят. ## Какво трябва да съдържа докладът Стойността е в предварително попълненото тяло. Празен линк 'пишете ни' ви носи 'не работи'. Предварително попълнен доклад ви дава нещо, по което можете да действате. Поискайте трите неща, които един разработчик винаги пита: - **Какво е правил посетителят** — действието, което се е провалило. - **Какво се е объркало** — текста на грешката или какво са очаквали да видят. - **Контекст** — URL адреса на страницата и в идеалния случай браузъра и часа. Ако бутонът живее във вашето собствено приложение, можете да попълните контекста автоматично. Един малък скрипт може да пусне текущия URL адрес, низа на браузъра и времеви печат директно в тялото, преди имейлът да се отвори, така че посетителят да напише само едно изречение: ```html <a id="report" href="#">Докладвай за проблем</a> <script> const a = document.getElementById('report'); const body = 'What I was doing:\nWhat went wrong:\n\n' + 'Page: ' + location.href + '\n' + 'Browser: ' + navigator.userAgent; a.href = 'mailto:[email protected]' + '?subject=' + encodeURIComponent('Site problem: ' + document.title) + '&body=' + encodeURIComponent(body); </script> ``` Сега всеки доклад пристига тагнат с точната страница и среда. Вашият разработчик често може да възпроизведе бъга, преди да отговори. ## Настройка за пет минути 1. Изберете адреса, който трябва да получава докладите. Споделена входяща кутия или псевдоним като `dev-team@` работи добре, така че целият екип да го вижда. 2. Създайте линка в генератора: задайте получателя, ясна тема като 'Докладван проблем в сайта' и кратко тяло с трите въпроса по-горе. 3. Копирайте HTML фрагмента и го поставете във вашия футър и на страницата ви за грешка. 4. Ако се намира в приложение, добавете малкия скрипт, така че URL адресът и браузърът да се попълват автоматично. 5. Изпратете си тестов доклад, за да потвърдите, че черновата се отваря правилно. Без бекенд, без услуга за формуляри на трети страни, без нова сметка. Връзката `mailto:` е част от HTML, така че работи на статичен сайт, целева страница, статия за помощ или пълно уеб приложение. ## Какво ви спестява Спестяването е във **времето за откриване**. Да предположим, че сайтът ви има 1000 посещения на ден и даден формуляр тихо се счупва в 14:00 часа. Без път за докладване може да разберете за това чак вечерта — шест часа и няколкостотин загубени регистрации по-късно. С бутон за докладване с един клик, първият объркан посетител информира екипа ви в рамките на минути. Губите шепа регистрации вместо цял следобед от тях. Има и спестяване при поддръжката. Неясни имейли 'сайтът ви е счупен' струват на служител по поддръжката по няколко минути всеки, само за да разбере коя е страницата и браузърът. Предварително попълнен доклад отговаря на тези въпроси предварително, така че триажът пада от минути на секунди. И тъй като докладването е без усилие, повече хора го правят — превръщайки тихия проблем в постоянен, честен сигнал за това какво всъщност се чупи в реални условия. Това също така защитава доверието. Посетител, който може да докладва за проблем с един клик, се чувства чут, дори когато нещо е счупено. Посетител, който попадне на неработещ формуляр и няма начин да ви каже, просто си тръгва и запомня сайта ви като този, който не е работил. ## Направете го още по-добро - Поставете бутона на вашите **404 и страници за грешка**, където разочарованието е най-голямо и докладът е най-ценен. - Използвайте **етикет в темата** като `Site problem:`, за да може просто правило във входящата кутия да насочва всеки доклад към правилния канал. - Дръжте адреса **замъглен** на публични страници, за да не го събират спам ботовете — малък скрипт, който сглобява линка при кликване, е достатъчен. - Съчетайте го с видима бележка за състоянието ('Имате затруднения? Кажете ни'), така че хората да знаят, че бутонът е там за тях. ## Ключови изводи - Вашите посетители първи виждат счупването, но почти никога не го докладват — триенето е твърде голямо. - Предварително попълнен `mailto:` бутон 'Докладвай за проблем' премахва това триене: един клик, едно изречение, изпратено. - Автоматично попълвайте URL адреса на страницата и браузъра, така че всеки доклад да бъде възпроизводим. - Не се нуждае от бекенд и бюджет, и намалява времето ви за откриване от часове на минути. Изградете свой собствен бутон за докладване в [генератора](/#generator) или копирайте настройката по-долу, за да започнете.