Недавно нам в 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-код?

На то было несколько причин:

1. Функция определения QR-кода встроена в приложение камеры на большинстве устройств.

2. QR поддерживает кодирование различных форматов информации: текст, URL, vCard, географические координаты, параметры Wi-Fi сети, шаблоны Еmail, SMS и других.

3. 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-код;

• Перейдите по ссылке.

  

3. На Android при помощи сторонних приложений:

• зайдите в Google Play;

• наберите в поиске «QR-код»;

• выберите любое приложение и скачайте его.
  Самое популярное – это «Сканер QR & штрих-кодов»;

• действуйте также, как описано выше в инструкции к IOS.

А теперь самое интересное - создаем QR-код для электронной визитки vCard

По итогу наших тестирований с разными версиями vCard и разными мобильными платформами мы пришли к выводу, что в нашем случае есть 2 варианта развития событий: либо мы делаем визитку только с названием компании и контактными данными (номер телефона, адрес и маленький логотип), либо полноценную красивую визитку с геолокацией, полным списком контактных данных и аватаром в высоком разрешении, но в виде динамической визитки, доступной по web-ссылке.

Ниже представлен пример реализации первого варианта.

1. Собираем все нужные данные (номера телефонов, почта и другие);

2. Помещаем их в визитку vCard;

3. Размещаем полученный текст в любом генераторе QR-кода;

4. Получаем готовый 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:

1. Находим кодировщик файлов в Base64 (мы использовали https://snipp.ru/tools/base64-img);

2. Загружаем туда изображение;

3. Конвертируем – преобразовываем картинку в систему двоичных данных;

4. Копируем полученный текст и размещаем в QR-коде.

   Важно: конвертируемое изображение изначально должно быть в формате png.
   Таким образом, его полученный двоичный код не должен превышать количество знаков и поместится в ваш QR-код.

   Параметры допустимых данных изображения, полученные опытным путем (информация может быть не абсолютной):
   Размер: 150 х 150 px
   Цветовая глубина: 8 бит
   DPI: 300 х 300
   Вес файла: 1 570 байт

Альтернативные варианты генерации QR-кода с vCard

1. Сервисы, генерирующие данные в QR-код.
   
   Плюс: легкость использования.
   Минусы: мало доступных полей для размещения информации, отсутствие индивидуальности.
   
   Сервис https://qrcoder.ru.
   Имеет минимальный набор полей, нельзя добавлять медиа контент (аудио, фото и видео).
   

   

2. Сервисы, создающие динамические визитки: фото, аудио и видео.
   
   Плюсы: много возможностей и вариантов.
   Минусы: ненадежность сервера, платные услуги.

   Один из лучших таких сервисов: 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-менеджера, а также основных наших групп в социальных сетях.

Итак, мы постарались максимально подробно и доступно показать, как можно сформировать персональную электронную визитку, чтобы потом использовать её на корпоративном мерче, на бумажных визитках или баннерах. Надеемся, информация будет полезна.

А если остались вопросы, давайте обсудим их в комментариях к этой статье.