Вы можете подумать, как вы можете обмениваться данными между разными доменами.
В этом небольшом руководстве я собираюсь объяснить, как этого можно достичь, используя только 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
Спасибо за уделенное время, надеюсь, вам понравилось!