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

Мы настоятельно не рекомендуем изменять содержимое digitalData прямым переопределением элементов вида digitalData.user.name = ‘Иван’.

Существует 2 вида использования метода changes:


Изменение конкретной переменной

Если необходимо динамически изменить значение одной переменной, в массив digitalData.changes должен быть добавлен специальный массив из 3-х элементов:

  • Имя переменной объекта digitalData, значение которой необходимо динамически изменить
  • Объект, Строка или Число, которые заменят значение переменной
  • Название источника изменения данных

Пример: Посетитель сайта подписывается на рассылку. Информация о том, что посетитель успешно подписался отображается без перезагрузки страницы. В этот момент необходимо изменить значение переменной digitalData.user.isSubscribed с false на true.

Состояние digitalData до события подписки:
digitalData = {
  ...
  user: {
    ...
    isSubscribed: false,
    ...
  },
  ...
}


Последовательное добавление события и изменения в digitalData:
//После возвращения с сервера сигнала об успешно подписке - добавляем событие в массив digitalData.events
digitalData.events.push({
  category: 'Email',
  name: 'Subscribed',
  user: {...}
});

//После добавления события - добавляем изменение в массив digitalData.changes
digitalData.changes.push(['user.isSubscribed', true, 'Source Code']);


Состояние digitalData после события подписки:
digitalData = {
  ...
  user: {
    ...
    isSubscribed: true,
    ...
  },
  ...
}

Изменение всего объекта digitalData

Данный подход необходимо использовать для сайтов, полностью построенных на технологии AJAX или Single-page (SP) сайтах.

Single-page сайты немного отличаются от обычных сайтов. При переходе по ссылке, в SP не происходит загрузка новой страницы. Вместо этого браузер посетителя отправляет асинхронных запрос (AJAX-запрос) на сервер. Сервер возвращает новый контент. Этим контентом браузер посетителя динамически заменяет или дополняет тот контент, который до этого был на сайте. В результате у посетителя создается впечатление, что была загружена новая страница сайта.

Для того, чтобы DigitalDataManager корректно обрабатывал динамические изменения контента, необходимо динамически обновлять слой данных digitalData. Ниже описан алгоритм:

  • Пользователь нажимает на ссылку, запрос уходит на сервер
  • Сервер возвращает контент с содержанием новой страницы, а также новым слепком объекта digitalData
  • После того, как контент и URL сайта изменяются необходимо последовательно вызвать методы: digitalData.changes.push({...}) и digitalData.events.push({name: 'Viewed Page'})

Важно. Полное изменение объекта digitalData на single-page сайтах всегда должно сопровождаться событием “Viewed Page”. Это событие помогает системе DigitalDataManager определить момент “виртуальной загрузки” новой страницы.

Пример: Посетитель single-page сайта переходит по ссылке из каталога на карточку товара. Контент сайта динамически обновляется.

Состояние digitalData до перехода по ссылки из каталога:
digitalData = {
  version: '1.1.2', // не изменится
  website: {...},   // не изменится      
  page: {...},      // изменится
  listing: {...},   // изменится. Объект digitalData.listing должен отсутствовать на карточке товара   
  user: {...},      // не изменится                  
  cart: {...},      // не изменится       
  changes: [...],   // изменится. В массив будет добавлен новый слепок digitalData
  events: [...]     // изменится. В массив будет добавлено событие 'Viewed Page'
}


Последовательное изменения в digitalData и добавление события загрузки новой страницы:
//Динамически изменяем digitalData
digitalData.changes.push({
  product: {...},     //описывает отобразившийся товар
  page: {...}         //описывает "загруженную" страницу
});
<br />
//После динамического изменения объекта digitalData необходимо добавить событие 'Viewed Page'
digitalData.events.push({
  name: 'Viewed Page',
});

Обратите внимание на последовательность: сначала изменение объекта, затем событие “Viewed Page”

Состояние digitalData после загрузки карточки товара:
digitalData = {
  version: '1.1.2', // не изменился
  website: {...},   // не изменился      
  page: {...},      // изменился. Заменен объектом из метода changes
  product: {...},   // добавлен. 
  user: {...},      // не изменился                  
  cart: {...},      // не изменился       
  changes: [...],   // изменился. Добавлен измененный объект
  events: [...]     // изменился. Добавлено событие "Viewed Page"
}

Важно. Если в новом объекте не будут использованы ключи “version”, “user”, “context”, “cart”, “website” - содержания соответствующих переменных останется без изменений.