# SPA сайты

Запуск кампаний персонализации на странице зависит от генерации браузером pageload — большинство кампаний рендерятся в браузере пользователя, когда загружается подходящая по таргетингу страница. SPA-сайты не генерируют pageload, поэтому платформа не сможет запустить кампанию без прямой передачи информации о просмотре страницы.

Чтобы запустить кампанию на странице, использующей SPA, необходимо:

1. Обеспечить передачу информации об актуальном значении контекста.
2. При каждом изменении контента на SPA-странице уведомлять платформу с помощью отправки SPA-события через API. Изменение части страницы (например, разворачивание блока, содержимое которого было недоступно при загрузке странице, или открытие модального окна) также должно инициировать SPA-событие.

Если возможно, на всех SPA-страницах необходимо указать корректный контекст (GF.pageContext) с сервера:

<script>
	window.GF = window.GF || {};
	GF.API = () => {};
  	GF.section = "YOUR_SECTION_ID";
  	GF.pageContext = { type:"HOMEPAGE", data:[] };
</script>
<script type="text/javascript" src="//cdn-01.gravityfield.ai/core/core.js"></script>

Если вариант 1 невозможен, контекст должен обязательно проставляться путем отправки первичного SPA-ивента (когда на фронте появляются необходимые данные). То есть на всех страницах контекст не ставится изначально, а отправляется с помощью SPA-ивента.

Шаги реализации:

• добавить в разметку GF.isSpa = true — при наличии в разметке isSpa скрипт core.js будет ожидать SPA-ивент, прежде чем что-либо делать на странице;
• добавить в разметку GF.syncLoad = true — при наличии в разметке syncLoad скрипт core.js будет ожидать, что dynamic.js должен быть добавлен напрямую;
• добавить в разметку dynamic.js (в пути которого указывается ID секции);
• не передавать в разметке GF.pageContext;
• отправить SPA-событие с информацией о контексте, когда на фронте появляются необходимые данные.

Разметка страницы будет выглядеть следующим образом:

<script>
	window.GF = window.GF || {};
	GF.API = () => {};
	GF.section = "YOUR_SECTION_ID";
	GF.isSpa = true;
	GF.syncLoad = true; 
</script>
<script type="text/javascript" src="//cdn-01.gravityfield.ai/core/core.js"></script>
<script type="text/javascript" src="//cdn-01.gravityfield.ai/sections/YOUR_SECTION_ID/dynamic.js"></script>

При каждом изменении контента на SPA-странице необходимо уведомлять платформу с помощью отправки SPA-события через JS API. Изменение части страницы (например, разворачивание блока, содержимое которого было недоступно при загрузке странице, или открытие модального окна) также должно инициировать SPA-событие.

SPA-событие может потребоваться дополнительно отправлять при первичной загрузке страницы, если нет возможности выставить контекст с сервера напрямую.

Синтаксис

GF.API('spa', {
	context: {
		type: 'PRODUCT',
		data: ['product-sku']
		},
	url: 'https://store.example.com/buy/product-sku.html',
	countAsPageview: true
});

Параметры: