В данном разделе вы узнаете:

  • Как установить слой данных digitalData на сайт.
  • Как правильно заполнить все переменные объекта digitalData.
  • Как правильно динамически изменять состав объекта digitalData

digitalData - это глобальный JavaScript объект. Его необходимо объявить как можно выше в исходном коде сайта, перед подключением библиотеки DigitalDataManager. Данный объект должен присутствовать на каждой странице сайта.

Объявляйте объект window.digitalData при первоначальной загрузке страницы. Не пытайтесь построить систему, в которой объект создается после AJAX-запроса. Такое решение ухудшит работу всей вашей маркетинговой инфраструктуры и сделает ее неуправляемой.

Навигация по странице


Введение


Разберем структуру объекта подробнее. Объект состоит из набора переменных, содержащих объекты и массивы. Все эти объекты и массивы необходимо заполнять информацией в соответствии со стандартом, описанным в данной документации.

В общем виде объект digitalData выглядит следующим образом:

window.digitalData = {
  version: '1.1.2',
  website: {...},         //Глобальная информация о сайте
  page: {...},            //Текущая страница
  user: {...},            //Посетитель или авторизованный пользователь
  product: {...},         //Товар, отображаемый на странице
  wishlist: {...},        //Список избранных товаров
  cart: {...},            //Состояние покупательской корзины
  transaction: {...},     //Транзакция, которая была только что завершена 
  listing: {...},         //Список товаров, отображаемых на странице
  recommendation: [...],  //Список товаров, рекомендованных для пользователя
  campaigns: [...],       //Список всех маркетинговых кампаний
  changes: [...],         //Изменения которые произошли в DDL после инициализации
  events: [...]           //События, произошедшие на данной странице
}

Подробный состав каждой переменной мы разберем дальше.

Как заполнять объект


digitalData можно представить как структурированное описание страницы, которую посетитель видит на экране своего монитора. Состав объекта digitalData зависит от содержания страницы. Приведем несколько примеров:

  • Пользователь перешел на карточку товара и видит детальную информацию о товаре: изображение, название, цену, бренд и т.д. Вся эта информация должна содержаться в объекте digitalData.product
  • Пользователь перешел на главную страницу, видит список рекомендованных товаров и несколько баннеров. Информация о рекомендованных товарах должна содержаться в массиве digitalData.recommendation, а информация о баннерах в массиве digitalData.campaigns.
  • Иконка корзины с количеством товаров видна на каждой странице интернет-магазина. Это значит, что объект digitalData.cart должен быть заполнен на каждой странице сайта.

Также digitalData содержит информацию о том пользователе, который просматривает сайт. Эта информация может и не отображается в явном виде, но должна присутствовать в объекте, например: подписан ли пользователь на email-рассылку, совершал ли пользователь покупки ранее, имя пользователя и т.д.

Как видно из примеров выше, одни переменные должны быть заполнены на каждой страницы, другие - на определенных типах страниц.

Далее мы рассмотрим стандарт заполнения каждой переменной и разберем примеры заполнения объекта для всех типовых страниц интернет-магазина.

Подробное описание объектов:

Подробное описание состава digitalData для типовых страниц интернет-магазина:

Если подключаемый сайт не является интернет-магазином, вы все равно можете использовать DigitalDataManager. Мы поможем подготовить схему данных (структуру объекта digitalData) специально под ваш проект.

Как динамически изменять объект


Часто бывает необходимо изменить содержание переменной digitalData без перезагрузки страницы. Например: при подписке на рассылку, добавлении товара в корзину, авторизации, регистрации и многих других событиях. В таком случае следуют использовать конструкцию вида digitalData.changes.push(...). DigitalDataManager “слушает” изменение массива digitalData.changes и автоматически обновляет соответствующие элементы объекта digitalData.

Примеры использования метода digitalData.changes.push(...) подробно описаны в разделе changes.