Вы можете подумать, как вы можете обмениваться данными между разными доменами.

В этом небольшом руководстве я собираюсь объяснить, как этого можно достичь, используя только javascript.

Я продемонстрирую это на примере идентификатора пользователя. Мы сгенерируем идентификатор пользователя и поделимся им между двумя доменами.

Давайте начнем!

Прежде всего нам нужны два разных домена и вспомогательный фрейм, который служил iframe на обоих веб-сайтах. Это будет уровень для связи между веб-сайтами. Мы будем использовать postMessage для связи между фреймами и localStorage для хранения данных.

Давайте создадим небольшой скрипт интеграции для интеграции нашего вспомогательного фрейма. Вы можете просто создать пустой файл helper.html. Скоро заполним. Вставьте приведенный ниже скрипт в тело обоих веб-сайтов.

<script type='text/javascript'>
  (function (){
     var helperFrame = document.createElement('iframe');
     helperFrame.src = '//api.example.dev/helper.html';
     helperFrame.id = 'helperFrame';
     helperFrame.style = 'display:none;';
     var body = document.getElementsByTagName('body')[0];
     body.appendChild(helperFrame);
   })();
</script>

Затем мы определим наши функции внутри helper.html для получения и установки идентификатора пользователя. Мы будем использовать локальное хранилище для управления идентификатором пользователя.

// Those callback functions will be triggered from parent frame.
let callbacks = {
  setUserId: () => {
    if (localStorage.getItem('userId') === null) { 
      // Generate random userId and store it in local storage
      localStorage.setItem('userId', Math.random().toString().substr(2));
    }
  }, 
  getUserId: () => {
    // Send user id to parent frame when its called.
    window.parent.postMessage(localStorage.getItem('userId'),  '*') 
  }
}
// Set User Id by default when frame loaded
// It can be triggered from parent frame also
callbacks.setUserId();

Теперь, используя функцию window.postMessage, мы будем общаться со вспомогательным фреймом из родительского фрейма. Для этого с обеих сторон должно быть событие перехвата сообщений, потому что мы установим userId из родительского фрейма и получим userId из вспомогательного фрейма. Давайте определимся с этим.

В helper.html определите eventListener для прослушивания событий postMessage. Аргумент события возвращает информацию postMessage. У него есть свойство data, которое является данными сообщения. В нашей демонстрации мы собираемся использовать имена функций в качестве данных для вызова наших функций обратного вызова из родительского фрейма.

window.addEventListener('message', (event) => {
   callbacks[event.data]();
});

Мы закончили с helper.html. Теперь пора определить слушателей и вызывающую функцию из родительского фрейма.

window.onload = () => {
  // Defining helper frame's window object.
  let helperFrameWindow = document.getElementById('helperFrame').contentWindow;
   
   let getUserId = () => () {
     // Sending post message to read data from helper frame
     helperFrameWindow.postMessage('getUserId', '*');
   }
  // Capture incoming messages from helper frame
  window.addEventListener('message', (event) => {
    console.log('User Id From helper frame:' + event.data);
  });
  getUserId();
}

Если я проверю хромированную консоль и локальное хранилище, я должен увидеть что-то вроде следующего. Это означает, что на веб-сайте unification1.dev:3001 у меня установлен вспомогательный фрейм и userId находится в его локальном хранилище.

Если я проверю другой свой веб-сайт, то есть unification2.dev:3002, я должен увидеть то же самое.

Вот и все! Я могу получить доступ к одному и тому же идентификатору пользователя на обоих веб-сайтах и ​​настроить таргетинг на моего пользователя.

Пример кода есть в github.

Https://github.com/tugayilik/unification/tree/75c65ae930fa64f5497d0f5c67bd79ef0245e97d

Спасибо за уделенное время, надеюсь, вам понравилось!