API и автоматизация встраивания

Вы свяжете страницу своего сайта со встроенным туром и отреагируете на действия посетителя. Просмотрщик отправляет родительской странице три события и принимает две команды — этого достаточно, чтобы тур следовал за содержимым страницы, а публикацию можно было автоматизировать своими инструментами. Всё это работает без доступа к аккаунту: достаточно общедоступного фрейма с туром.

Слушаем просмотрщик

Встроенный просмотрщик отправляет сообщение родительскому окну, когда тур загрузился, когда посетитель сменил сцену и когда нажал хотспот. Подпишитесь на сообщения, проверьте поле type и прочитайте payload. Событие tourReady сообщает, что первый кадр уже на экране и просмотр можно измерять. Сообщения приходят в родительское окно, поэтому подписку ставит страница, а не тур.

• tourReady — тур загрузился, первая сцена показана.
• sceneChanged — посетитель перешёл в другую сцену, передан её идентификатор.
• hotspotClicked — активирован хотспот, передан его идентификатор.

Отправляем команды

1. Сохраните ссылку на элемент iframe с туром в коде страницы.
2. Отправляйте команды только после того, как пришло событие tourReady.
3. goToScene открывает сцену с заданным идентификатором, чтобы посетитель следовал за текстом страницы.
4. setUiMode переключает интерфейс между полным и минимальным видом.

Собираем вместе

const frame = document.querySelector("iframe");

frame.addEventListener("message", (event) => {
  const { type, payload } = event.data ?? {};
  if (type === "tourReady") console.log("tour is ready", payload);
  if (type === "sceneChanged") console.log("scene", payload.scene);
  if (type === "hotspotClicked") console.log("hotspot", payload.hotspotId);
});

frame.contentWindow.postMessage({ type: "goToScene", payload: { scene: 4 } }, "*");
frame.contentWindow.postMessage({ type: "setUiMode", payload: { mode: "minimal" } }, "*");