OneTrust: проверьте, используется ли OneTrust в проекте, и дождитесь полной загрузки

У меня возникают трудности с настройкой загрузки некоторых моих файлов TypeScript в зависимости от OneTrust, независимо от того, доступен он или нет при загрузке страницы, и, если он доступен, загружаю определенные сценарии TypeScript только тогда, когда установлены определенные файлы cookie. Некоторые проекты, которые также полагаются на эту кодовую базу, в настоящее время могут не использовать OneTrust, поэтому сценарии для этого проекта должны по-прежнему нормально загружаться, когда OneTrust недоступен (хотя в будущем это будет изменено).

У меня есть два вопроса относительно OneTrust:

  1. Как я могу достоверно проверить, присутствует ли OneTrust в проекте?
  2. Если OneTrust присутствует в проекте, как лучше дождаться полной загрузки OneTrust?

Я уже пытался сделать что-то вроде этого:

const isActive = typeof window !== 'undefined' && typeof window.OptanonWrapper === 'function';

или

const isOneTrustActive = typeof window !== 'undefined' && typeof window.OneTrust === 'object';

К сожалению, установка объектов обычно не завершена окончательно, что указывает на то, что OneTrust недоступен:

typeof window.OneTrust === 'undefined' (should be 'object')
typeof window.OnetrustActiveGroups === 'undefined' (should be 'string')

Они станут доступны только вскоре после того, как мои сценарии проверят их доступность.

Я не нашел события OneTrust, которое срабатывает после успешного завершения загрузки OneTrust.

Я знаю, что в OneTrust есть функция обратного вызова, которая будет запускаться при изменении файлов cookie, и она отлично работает:

window.OneTrust.OnConsentChanged(callback)

Есть ли что-то подобное для первоначального завершения загрузки OneTrust? Я не смог найти ничего подобного.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Сам OneTrust не поставляется с какими-либо инструментами JS, позволяющими узнать, когда баннер загружен и готов к использованию. Вам придется либо прослушивать событие load в теге <script> скрипта OneTrust, либо отправлять пользовательское событие в обратном вызове OptanonWrapper.

<script type = "text/javascript">
  function OptanonWrapper() { 
    const oneTrustLoadedEvent = new CustomEvent('onetrustloaded');
    window.dispatchEvent(oneTrustLoadedEvent);
  }
</script>

Это позволит вам запускать код всякий раз, когда OneTrust действительно готов, вместо опроса.

Спасибо за информацию! Теперь я нашел решение своей проблемы с помощью этого:

Tobias 10.07.2024 15:13
Ответ принят как подходящий

Ответ, который мне был нужен, я нашел благодаря ответу @emiel-zuurbier.

  • Обновление (25 июля 2024 г.): добавлен окончательный рабочий функционал.

Функция OptanonWrapper в реализации сценария OneTrust с моим пользовательским событием:

function OptanonWrapper() {
    const event = new Event('onetrustloaded');
    document.dispatchEvent(event);
    window.OneTrustLoaded = true;
}

Проверьте доступность OneTrust:

export const isOneTrustActive = (): boolean => {
    return typeof window !== 'undefined' && typeof window.OptanonWrapper === 'function';
};

Проверьте, завершилась ли загрузка OneTrust:

export const isOneTrustLoaded = (): boolean => {
    // Set OneTrustLoaded window variable if not yet available --> not yet ready
    if (!(typeof window.OneTrustLoaded === 'boolean')) {
        window.OneTrustLoaded = false;
    }

    return window.OneTrustLoaded;
};

Функция для ожидания пользовательского события инициализации OneTrust и вызова обратного вызова:

export const initOneTrustCallback = (immediateCallback: any, onChangeCallback: any): void => {
    // OneTrust finished loading?
    if (!isOneTrustLoaded()) {
        document.addEventListener('onetrustloaded', () => {
            window.OneTrustLoaded = true;

            // Initial check for cookie state to either activate videos or not - without reloading page
            immediateCallback();

            // OneTrust OnConsentChanged will be called by OneTrust when cookies have been changed
            window.OneTrust.OnConsentChanged(onChangeCallback);
        });
        return;
    }

    // Initial check for cookie state to either activate videos or not - without reloading page
    immediateCallback();

    // OnConsentChanged will be called by OneTrust when cookies have been changed (listener)
    window.OneTrust.OnConsentChanged(onChangeCallback);
};

Как выглядит окончательная реализация моей функции инициализации:

/* Init */
((): void => {
    if (!isOneTrustActive()) {
        // Initialize normal components and functions here without considering OneTrust cookies...
        return;
    }
       
    // Initial OneTrust init
    initOneTrustCallback(initFunction, onChangeFunction);
})();

Другие вопросы по теме