Создаем QR-код для электронной визитки vCard
Всем нужен твой QR-код! И нет, это мы не ковид сейчас вспомнили)
Недавно нам в EvApps понадобилось создать электронную визитку компании vCard и зашить ее в QR-код, чтобы удобнее было обмениваться контактами при помощи смартфона. Что из этого вышло (а также несколько технических лайфхаков), читай в этой статье.
Для начала разберемся, зачем нам vCard?
Это тоже самое, что и обычная визитная карточка, только передают ее не из рук в руки, а с одного устройства на другое: через социальные сети, электронную почту или Bluetooth.
Что такое vCard для пользователей?
vCard имеет расширение .vcf — это текстовый файл в виде контейнера, который хранит вашу контактную информацию: ФИО, номера телефонов, адрес почты, наименование компании, вашу должность и прочее.
Технический анализ электронной визитной карточки vCard
Формат vCard был разработан еще в 1995 года консорциумом Versit — организацией, которая создает и дополняет стандарты Интернета.
vCard — это расширение формата MIME-DIR, являющегося стандартом кодирования передачи информации.
Кроме обычных для формата MIME-DIR атрибутов uri, date, date-time и float для vCard вводятся форматы binary, phone-number, utc-offset и vcard.
Если представить данные MIME-DIR как текстовую строку, то мы обычно пишем:
<тип атрибута>
<значение атрибута>
Тип атрибута включает в себя сведения о языке и о кодировке, а значение атрибута могут быть в различных форматах. В одном файле на электронной почте вы можете иметь от одной до нескольких vCard.
Строчки кода должны выглядеть так:
begin:vcard
(строки атрибутов vCard)
end:vcard
Типы vCard
vCard имеет три типа структуры, которые отличаются только форматами данных:
версия 2.1 (VCF 2.1)
Пример:BEGIN:VCARD
VERSION:2.1
N:Иванов Иван
FN:Иванов Иван
ORG:”Рога и копыта” Ltd
TITLE:Рога и копыта
PHOTO;GIF:http://www.example.com/dir_photos/my_photo.gif
TEL;WORK;VOICE:(111) 555-1212
TEL;HOME;VOICE:(404) 555-1212
ADR;WORK;PREF:;;12 ул. Академика Королёва;г.Москва;;301000;Россия
ADR;HOME:;;12 ул. Академика Королёва;г.Москва;;301000;Россия
EMAIL:superemail@example.com
END:VCARD
версия 3.0 (VCF 3.0)
Пример:BEGIN:VCARD
VERSION:3.0
N:Иван;Иванов
FN:Иванов Иван
ORG:”Рога и копыта” Ltd
TITLE:Рога и копыта
PHOTO;VALUE#URI;TYPE#GIF:http://www.example.com/dir_photos/my_photo.gif
TEL;TYPE#WORK,VOICE:(111) 555-1212
TEL;TYPE#HOME,VOICE:(404) 555-1212
ADR;TYPE#WORK,PREF:;;12 ул. Академика Королёва;г.Москва;301000;Россия
ADR;TYPE#HOME:;;12 ул. Академика Королёва;г.Москва;301000;Россия
EMAIL:superemail@example.com
REV:2008-04-24T19:52:43Z
END:VCARDверсия 4.0 (VCF 4.0)
Пример:BEGIN:VCARD
VERSION:4.0
N:Иван;Иванов
FN:Иванов Иван
ORG:”Рога и копыта” Ltd
TITLE:Рога и копыта
PHOTO;MEDIATYPE#image/gif:http://www.sherinnom.com/dir_photos/my_photo.gif
TEL;TYPE#work,voice;VALUE#uri:tel:+1-111-555-1212
TEL;TYPE#home,voice;VALUE#uri:tel:+1-404-555-1212
ADR;TYPE#WORK;PREF#1;LABEL#"12 ул.Академика королёва.\Москва\301000\Россия":;;12 ул. Академика Королёва;г.Москва;301000;Россия
EMAIL:superemail@example.com
REV:20080424T195243Z
x-qq:21588891
END:VCARDИспользовать четвертую версию не рекомендуется, потому что она не распознаётся телефоном.
Работа vCard на различных платформах
Если мы попробуем просто передать файл в формате vCard на телефон, то устройство его не распознает. Различные операционные системы и даже различные их версии по разному поддерживают ту или иную версию vCard.
1. Android
Все более-менее современные телефоны на базе OC Android имеют на борту версию операционной системы 10 или 11. В ней реализована поддержка как vCard 2.1, так и 3.0. Но, если мы попробуем на телефон с 12 или 13 версией Android загрузить и установить файл в формате vCard 3.0, то адресная книга распознает только фамилию и имя из карточки, остальные данные так и останутся неопознанными. Нужно переформировать файл в vCard 2.1, и тогда при импорте контакта загрузится вся информация, помещённая в него.
2. iOS
На устройствах Apple поддерживаются как vCard 2.1, так и vCard 3.0 без каких-либо проблем в чтении формата.
Для того, чтобы обеспечить распознавание нашей vCard любыми устройствами мы решили использовать QR-код.
Почему QR-код?
На то было несколько причин:
Функция определения QR-кода встроена в приложение камеры на большинстве устройств.
QR поддерживает кодирование различных форматов информации: текст, URL, vCard, географические координаты, параметры Wi-Fi сети, шаблоны Еmail, SMS и других.
QR-код распознается даже в перевернутом или зеркальном положении за счет трех угловых квадратов привязки.
А значит, этот формат идеально подходил к нашей цели — создать наиболее полную визитку компании, которой легко делиться при необходимости.
Из истории вопроса:
Возможность поделиться своим контактом через QR-код появилась в 2019 году. Впервые она стала доступна в приложении Instagram (деятельность этой социальной сети и ее владельца, компании Meta, запрещена на территории РФ). Тогда надо было зайти в специальный раздел в приложении, запустить оттуда камеру с режимом распознавания QR кода, считать показанный тебе код и подписаться на пользователя. Потом подобный функционал начал появляться в остальных продуктах компании. А год спустя, в 2020, разработчики пошли в сторону оптимизации и добавили возможность читать QR стандартным приложением камеры телефона.
О существовании QR-кодов в наше время слышали без преувеличения все, а вот о том, как их правильно создать и применять в работе, знают единицы.
Версии, типы и возможности QR-кодов
Все QR-коды разделены на версии:
21×21 — самая маленькая версия (№ 1)
177×177 — самая большая версия (№ 40)
Каждая последующая версия, от первой до сороковой, увеличивается на 4 пикселя по горизонтали и вертикали. При расчете пикселей для определения версии QR-кода не учитывается размер его полей.
Однако, стоит помнить, что сканер стандартных мобильных устройств считывает QR-коды только до 4 версии (33×33) включительно.
Основные кодировки QR-кода:
цифровая (поддерживает только цифры),
алфавитно-цифровая (поддерживает и цифры, и буквы),
байтовая (поддерживает любую кодировку),
кандзи (кодировка на иероглифах).
Каждый QR-код проходит проверку на ошибки при помощи недвоичного цикличного кода Рида-Соломона.
Чем больше в QR-коде информации, тем больше его версия. Для каждой четверти количества версий QR-кода есть свой уровень избыточности: 7%, 15%, 25% и 30%.
Кроме того, QR-код может быть статическим или динамическим:
Статический QR-код — это матричный код с объемом информации до 4296 символов.
Статический QR-код может содержать в себе текст, номер телефона, адрес эл-почты. Его нельзя изменять из-за встроенного URL-адреса.
Динамический QR-код — это URL-адрес, через который пользователь переходит по нужной ссылке. Естественно, этот адрес можно менять.
Кроме того, динамический QR-код можно защитить паролем и отслеживать сканирующие его устройства.
Такой QR удобнее для пользователя: его легче сканировать из-за небольшого объема деталей.
Распознавание QR-кода телефоном
1. На iOS:
Откройте предложение Камеры;
Расположите устройство так, чтобы по середине экрана четко различался QR-код;
Если телефон распознал QR-код, вы получите уведомление;
Перейдите по ссылке, указанной в уведомлении.
2. На Android при помощи Google Lens (если у вас нет встроенного сканирования):
Откройте приложение Камеры;
Найдите на экране значок, указанный на картинке;
Значок сканирования QR-кода в интерфейсе Google Lens
Кликните на значок — откроется изображение сканера;
Наведите камеру на QR-код;
Перейдите по ссылке.
Активная ссылка из QR-кода
3. На Android при помощи сторонних приложений:
зайдите в Google Play;
наберите в поиске «QR-код»;
выберите любое приложение и скачайте его.
Самое популярное — это «Сканер QR & штрих-кодов»;действуйте также, как описано выше в инструкции к IOS.
А теперь самое интересное — создаем QR-код для электронной визитки vCard
По итогу наших тестирований с разными версиями vCard и разными мобильными платформами мы пришли к выводу, что в нашем случае есть 2 варианта развития событий: либо мы делаем визитку только с названием компании и контактными данными (номер телефона, адрес и маленький логотип), либо полноценную красивую визитку с геолокацией, полным списком контактных данных и аватаром в высоком разрешении, но в виде динамической визитки, доступной по web-ссылке.
Ниже представлен пример реализации первого варианта.
Собираем все нужные данные (номера телефонов, почта и другие);
Помещаем их в визитку vCard;
Размещаем полученный текст в любом генераторе QR-кода;
Получаем готовый QR-код.
Не допускаем ошибок!
1. Ограничение знаков.
Цифровая кодировка ≤ 7089
Алфавитно-цифровая кодировка ≤ 4296 (латиница)
Байтовая кодировка ≤ 2953 (кодировка Windows-1251 ≤ 2953; UTF-8 (это стандарт Юникода — кодирования символов) ≤ 1450) (кириллица)
Важно: считается каждый символ, помещенный в QR-код (запятые, пробелы и так далее).
2. Размещаем почтовый адрес вашего местонахождения.
У адреса, как и у полноценных координат, существует порядок написания: улица; дом; город; регион; индекс; страна.
Пример: ADR;CHARSET=UTF-8;type=WORK;type=pref:;;ул. Тургеневская, 69, 5й этаж, офис 525 ;Тула;Тульская область;300041;Россия;
Ваш адрес можно будет по клику открывать в Google-картах или в других приложениях, определяющих местоположение.
3. Размещаем изображения.
Не размещайте изображения в виде веб-ссылки — в месте, где нет интернета, оно не будет загружаться!
Base64 — стандарт кодирования двоичных данных — самый легкий вариант.
*Инструкция по использованию Base64:
Находим кодировщик файлов в Base64 (мы использовали https://snipp.ru/tools/base64-img);
Загружаем туда изображение;
Конвертируем — преобразовываем картинку в систему двоичных данных;
Копируем полученный текст и размещаем в QR-коде.
Важно: конвертируемое изображение изначально должно быть в формате png.
Таким образом, его полученный двоичный код не должен превышать количество знаков и поместится в ваш QR-код.Параметры допустимых данных изображения, полученные опытным путем (информация может быть не абсолютной):
Размер: 150×150 px
Цветовая глубина: 8 бит
DPI: 300×300
Вес файла: 1 570 байт
Альтернативные варианты генерации QR-кода с vCard
Сервисы, генерирующие данные в QR-код.
Плюс: легкость использования.
Минусы: мало доступных полей для размещения информации, отсутствие индивидуальности.Сервис https://qrcoder.ru.
Имеет минимальный набор полей, нельзя добавлять медиа контент (аудио, фото и видео).
Сервисы, создающие динамические визитки: фото, аудио и видео.
Плюсы: много возможностей и вариантов.
Минусы: ненадежность сервера, платные услуги.Один из лучших таких сервисов: www.stqr.ru/generator/vcard
Возможности:
— Можно взять бесплатный пробный период;
— Создание разных видов QR-кода, внесение в них изменений, статистика их использования;
— Обладание стильной страницей со всеми данными;
— Весь файл можно легко преобразовать в vCard.
Еще один сервис, который мы попробовали: www.qrcode-tiger.com/. Все тоже самое, что и у предыдущего, но возможности бесплатной пробной версии ограничены.
Какие еще возможности есть у QR-кодов?
С их помощью можно отслеживать статистику переходов при помощи UTM-меток.
UTM-метки (Urchin Tracking Module) представляют собой небольшие коды, добавляемые к URL-адресам, чтобы отслеживать и анализировать источники трафика на веб-сайтах. В сочетании с динамическими QR-кодами UTM-метки предоставляют мощный инструмент для отслеживания и измерения эффективности маркетинговых кампаний.
По сути дела, UTM-метки — это набор параметров, добавляемых к URL-адресу, чтобы идентифицировать источник трафика.
Они состоят из пяти основных параметров:
utm_source: указывает источник трафика, например, почтовую рассылку или социальные сети; utm_medium: определяет средство, которым пользователь перешел по ссылке, например, электронную почту или баннерную рекламу; utm_campaign: идентифицирует конкретную маркетинговую кампанию, в рамках которой использовалась ссылка; utm_term: позволяет отслеживать определенные ключевые слова или фразы; utm_content: используется для разделения контента внутри одной и той же кампании.
Как использовать UTM-метки с динамическими QR-кодами?
Динамические QR-коды дают возможность создавать ссылки с включенными UTM-метками, что позволяет точно отслеживать, откуда происходит трафик при сканировании QR-кода. Например, при создании QR-кода с электронной визиткой, можно добавить utm_source=social&utm_medium=qr&utm_campaign=campaign1 к URL-адресу в QR-коде.
Таким образом, каждое сканирование QR-кода будет зафиксировано с указанием точного источника и средства, через которые пользователь перешел по QR.
Сбор и анализ статистики
Для сбора статистики по использованию UTM-меток в динамических QR-кодах можно воспользоваться различными инструментами, такими как Google Analytics, Yandex метрика или специализированные платформы для отслеживания маркетинговых кампаний. Эти инструменты позволяют получить детальную информацию о количестве переходов, конверсиях, среднем времени на сайте и других метриках, связанных с каждой UTM-меткой.
Работа с полученной статистикой
Собранная статистика позволяет оценить эффективность каждой маркетинговой кампании или качество предоставленного контента и идентифицировать наиболее успешные каналы и источники трафика.
В нашем случае мы сделали несколько QR-кодов, снабжённых UTM-метками: с основным контактом компании, контактом HR-директора, PR-менеджера, а также основных наших групп в социальных сетях.
Итак, мы постарались максимально подробно и доступно показать, как можно сформировать персональную электронную визитку, чтобы потом использовать её на корпоративном мерче, на бумажных визитках или баннерах. Надеемся, информация будет полезна.
А если остались вопросы, давайте обсудим их в комментариях к этой статье.
