Embed Riddle in modern frameworks

<template>
    <div v-if="riddle2WrapperStyle.display === 'none'" class="rid-load-wrapper">
        <div class="rid-load-wrapper__loader">
            <p>
                <i></i>
                <i></i>
                <i></i>
            </p>
        </div>
    </div>
    <div class="riddle2-wrapper" :style="riddle2WrapperStyle">
        <iframe ref="_iframeElement" :style="iframeStyle"
            :src="`https://riddle.com/embed/a/${props.riddleId}?lazyImages=${lazyImages}&staticHeight=${staticHeight}`"
            allow="autoplay" referrerpolicy="strict-origin"></iframe>

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

interface RiddleDataLayerItem {
    key: string;
    value: string | number;
}

type RiddleEventType =
    | "RiddleInited"
    | "RiddleNotInited"
    | "HeightChanged"
    | "PageChanged"
    | "Voted";

interface RiddleEvent {
    isRiddle2Event: boolean;
    type: RiddleEventType;
    riddleId: string;
    height: number;
    isUnrolled: boolean;
    redirectToCustomLandingPage?: {
        path: string;
        data: string;
    };
}

enum RiddleTrackEventAction {
    Form_Submit = "Form_Submit",
    Form_Skip = "Form_Skip",
    Block_Submit = "Block_Submit",
    Block_Skip = "Block_Skip",
    Block_View = "Block_View",
    Block_Next = "Block_Next",
    Social = "Social",
    Cta = "Cta",
    CoreMetrics = "CoreMetrics",
    LeadSettings = "LeadSettings",
}

enum RiddleTrackNetworks {
    customTracking = "customTracking",
    facebookPixel = "facebookPixel",
    googleAnalytics = "googleAnalytics",
    googleAnalytics4 = "googleAnalytics4",
    googleTagManager = "googleTagManager",
    matomoTag = "matomoTag",
}

enum RiddleTracDefaultkNetworkObjects {
    facebookPixel = "fbq",
    googleAnalytics = "ga",
    googleAnalytics4 = "gtag",
    googleTagManager = "dataLayer",
    matomoTag = "_paq",
}

interface RiddleTrackNetworksConfig {
    networkName: RiddleTrackNetworks;
}

interface RiddleTrackNetworksConfig_Default extends RiddleTrackNetworksConfig {
    networkName: RiddleTrackNetworks;
    networkObjectName: string;
}

interface RiddleTrackNetworksConfig_Custom extends RiddleTrackNetworksConfig {
    networkName: RiddleTrackNetworks;
    eventFunction: string;
}

type RiddleTrackEventDataTypes =
    | "blockId"
    | "blockType"
    | "blockTypeGroup"
    | "blockTitle"
    | "blockDescription"
    | "answerIsCorrect"
    | "answerScore"
    | "answerTotalScore"
    | "answerLivesTotal"
    | "answerLivesUsed"
    | "answerSpotsTotal"
    | "answerSpotsFound"
    | "answer"
    | "resultScore"
    | "resultTotalScore"
    | "resultScorePercentage"
    | "personalityScore"
    | "personalityTotalScore"
    | "personalityScorePercentage"
    | "timerRiddleTotalSeconds"
    | "timerRiddleCurrentSeconds"
    | "timerBlockTotalSeconds"
    | "timerBlockCurrentSeconds";

type RiddleTrackEvent = {
    [key in RiddleTrackEventDataTypes]: any;
} & {
    isRiddle2Event: boolean;
    riddleId: string;
    category: string;
    action: RiddleTrackEventAction;
    name: string;
    trackNetworks?: Array<RiddleTrackNetworksConfig>;
};

interface Props {
    riddleId: string;
    autoScroll?: boolean;
    autoScrollOffset?: number;
    staticHeight?: boolean;
    height?: number;
    lazyImages?: boolean;
    width: string;
}

const props = withDefaults(defineProps<Props>(), {
    autoScroll: false,
    autoScrollOffset: 0,
    staticHeight: false,
    height: 400,
    lazyImages: false,
    width: '640px'
})

const emit = defineEmits(['riddle-loaded'])

const riddle2WrapperStyle = ref({
    margin: '0 auto',
    maxWidth: '100%',
    width: props.width,
    display: 'none'
})

const iframeStyle = ref({
    width: '100%',
    height: '100%',
    border: 'none'
})

const _iframeElement = ref<HTMLIFrameElement>()
const isMessageListenerAdded = ref(false)
const _riddleDataLayer = ref<Array<RiddleDataLayerItem>>()
const _scrollPosition = ref(0)

onMounted(() => {
    console.log('Riddle Embed mounted');

    if (!isMessageListenerAdded.value) {
        isMessageListenerAdded.value = true

        window.addEventListener('message', onRiddleV2Event, false);
    }

    _scrollPosition.value = 0;
    document.addEventListener('scroll', onScroll);
})

onBeforeUnmount(() => {
    window.removeEventListener('message', onRiddleV2Event);
    document.removeEventListener('scroll', onScroll);
})

const onScroll = () => {
    if (_scrollPosition.value != 0) {
        window.scrollTo(0, _scrollPosition.value);
        _scrollPosition.value = 0;
    }

    sendPositionDataToIframe();
}


const validateDataLayerItem = (target: Array<RiddleDataLayerItem>, value: RiddleDataLayerItem): boolean => {
    const validKeyTypes = ['string', 'number'];
    let isValid = true;

    if (typeof value !== 'object') {
        console.log('typeof DataLayerItem:', typeof value);
        console.log('DataLayerItem must be an object like: { key: "key", value: "value" || 0 }');
        isValid = false;
    }

    if (typeof value.key !== 'string') {
        console.log('typeof DataLayerItem.key:', typeof value.key);
        console.log('DataLayerItem must have a "key"');
        isValid = false;
    }

    if (!validKeyTypes.includes(typeof value.value)) {
        console.log('typeof DataLayerItem.value:', typeof value.value);
        console.log('DataLayerItem must have a "value" of type: ' + validKeyTypes.join(' or '));
        isValid = false;
    }

    if (isValid) {
        target.push(value);
    }

    return isValid;
};

const initDataLayer = () => {
    const itemHandler = {
        set: (target: Array<RiddleDataLayerItem>, p: PropertyKey, value: RiddleDataLayerItem) => {
            if (p === 'length') {
                (target as object)[p] = value;
                return true;
            }

            const isValid = validateDataLayerItem(target, value);

            if (isValid) {
                _iframeElement.value?.contentWindow?.postMessage(
                    { dataLayerItem: value, riddleQueryString: window.location.href.split('?')[1], riddleParentLocation: window.location.href },
                    '*',
                );
            }

            return isValid;
        },
    };

    _riddleDataLayer.value = new Proxy<Array<RiddleDataLayerItem>>([], itemHandler);

    readFromUrl();
}

const readFromUrl = () => {
    const queryString = window.location.search;
    const urlSearchParams = new URLSearchParams(queryString);
    const params = Object.fromEntries(urlSearchParams.entries());

    for (const key in params) {
        if (Object.prototype.hasOwnProperty.call(params, key)) {
            const value = params[key];

            pushDataLayerItem({
                key: key,
                value: value,
            });
        }
    }
}

const pushDataLayerItem = (item: RiddleDataLayerItem) => {
    if (_riddleDataLayer.value) {
        const index = _riddleDataLayer.value.findIndex(i => i.key === item.key);

        if (index === -1) {
            _riddleDataLayer.value.push(item);
        } else {
            _riddleDataLayer.value[index] = item;
        }
    }
}

const UpdateHeight = (height: number) => {
    iframeStyle.value.height = height + 'px';
}

const pushTrackEvent = (riddleEvent: RiddleTrackEvent) => {
    if (riddleEvent.trackNetworks) {
        riddleEvent.trackNetworks.forEach(trackNetwork => {
            try {
                if (trackNetwork.networkName === RiddleTrackNetworks.customTracking) {
                    const tnef = (trackNetwork as RiddleTrackNetworksConfig_Custom).eventFunction;
                    const ef = eval(tnef);
                    ef(riddleEvent);
                } else {
                    const tn = trackNetwork as RiddleTrackNetworksConfig_Default;

                    const data = {
                        ...riddleEvent,
                    } as any;

                    delete data.trackNetworks;

                    switch (trackNetwork.networkName) {
                        // facebook pixel
                        case RiddleTrackNetworks.facebookPixel:
                            const fbq = window[tn.networkObjectName];

                            fbq('trackCustom', riddleEvent.category, {
                                eventAction: riddleEvent.action,
                                eventName: riddleEvent.name,
                                ...data,
                            });

                            break;

                        // google analytics
                        case RiddleTrackNetworks.googleAnalytics:
                            const ga = window[tn.networkObjectName];
                            ga('send', 'event', [riddleEvent.category], [riddleEvent.action], [riddleEvent.name], ...data);
                            break;

                        case RiddleTrackNetworks.googleAnalytics4:
                            const gtag = window[tn.networkObjectName];
                            gtag('event', riddleEvent.category, {
                                event_name: riddleEvent.name,
                                event_action: riddleEvent.action,
                                ...data,
                            });
                            break;

                        // google tag manager
                        case RiddleTrackNetworks.googleTagManager:
                            const dataLayer = window[tn.networkObjectName];
                            dataLayer.push({
                                event: 'RiddleEvent',
                                event_category: riddleEvent.category,
                                event_action: riddleEvent.action,
                                event_name: riddleEvent.name,
                                ...data,
                            });
                            break;

                        // matomo tag
                        case RiddleTrackNetworks.matomoTag:
                            const _paq = window[tn.networkObjectName];
                            _paq.push(['trackEvent', riddleEvent.category, riddleEvent.action, riddleEvent.name, ...data]);
                            break;

                        default:
                            break;
                    }
                }
            } catch (error) {
                console.log('[RiddleTrackingError] ' + trackNetwork.networkName + ' not found');
            }
        });
    }
}

const sendPositionDataToIframe = () => {
    var iframeOffsetTop = _iframeElement.value.getBoundingClientRect().top + window.scrollY || window.pageYOffset;
    var viewtop = window.scrollY || window.pageYOffset;
    var viewbottom = viewtop + window.innerHeight;

    // Post Position to iframe
    _iframeElement.value.contentWindow?.postMessage(
        {
            iframeOffsetTop: iframeOffsetTop,
            viewtop: viewtop,
            viewbottom: viewbottom,
        },
        '*',
    );
}

const preventSiteJump = () => {
    var doc = document.documentElement;
    _scrollPosition.value = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
}

const onRiddleV2Event = (event: MessageEvent) => {
    let riddleEvent = event.data as RiddleEvent;

    if (!(riddleEvent as RiddleEvent).isRiddle2Event || (riddleEvent as RiddleEvent).riddleId.toString() !== props.riddleId) {
        return;
    }

    // Remove Loader
    if ((riddleEvent as RiddleEvent).type === 'RiddleInited') {
        riddle2WrapperStyle.value.display = 'block';
        emit('riddle-loaded');
    }

    // Update Height
    if ((riddleEvent as RiddleEvent).height) {
        UpdateHeight((riddleEvent as RiddleEvent).height);
        initDataLayer();
    }

    if (typeof event.data.category == 'string' && (event.data.category as string).startsWith('RiddleTrackEvent')) {
        const data = event.data as RiddleTrackEvent;
        pushTrackEvent(data);
    }

    if (((riddleEvent as RiddleEvent).type == 'PageChanged' || (event.data as RiddleTrackEvent).action === 'Block_View') && props.autoScroll) {
        console.log("🚀 ~ onRiddleV2Event ~ props.autoScroll:", props.autoScroll)

        // scroll to top of riddle
        const pos = _iframeElement.value.getBoundingClientRect().top;

        const target = pos + window.scrollY - 10 - props.autoScrollOffset;

        window.scrollTo({
            top: target,
            behavior: 'smooth',
        });

        sendPositionDataToIframe();
    } else if ((riddleEvent as RiddleEvent).type == 'PageChanged' && !props.autoScroll) {
        preventSiteJump();
        sendPositionDataToIframe();
    }

    // Redirect to custom landing page
    redirectToCustomResultPage(riddleEvent);
};

const redirectToCustomResultPage = (riddleEvent: RiddleEvent) => {
    if (
        (riddleEvent as RiddleEvent).redirectToCustomLandingPage
    ) {
        const path = (riddleEvent as RiddleEvent).redirectToCustomLandingPage.path;
        const data = (riddleEvent as RiddleEvent).redirectToCustomLandingPage.data;

        const form = window.parent.document.createElement('form');
        form.setAttribute('method', 'post');
        form.setAttribute('action', path);

        const hiddenField = window.parent.document.createElement('input');
        hiddenField.setAttribute('type', 'hidden');
        hiddenField.setAttribute('name', 'data');
        hiddenField.setAttribute('value', data);

        form.appendChild(hiddenField);
        window.parent.document.body.appendChild(form);

        form.submit();
    }
}
</script>

<style lang="scss" scoped>
.riddle2-wrapper {}

.rid-load-wrapper {
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    width: 640px;
    height: 358.391px;
}

.rid-load-wrapper__loader {
    background: transparent;
}

.rid-load-wrapper__loader i {
    background: transparent;
}

.rid-load-wrapper__loader i:before {
    border-color: #00205b;
}

.rid-load-wrapper__loader {
    padding-top: 56%;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity ease-out 0.5s;
    box-sizing: border-box;
}

.rid-load-wrapper__loader p {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px;
}

.rid-load-wrapper__loader i {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    left: -8px;
    animation: 3s infinite rid-icon;
    transform: scale(1) rotate(30deg);
}

.rid-load-wrapper__loader i:before {
    box-sizing: border-box;
    content: '';
    display: block;
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    top: 2px;
    border: 2px solid;
    border-radius: 3px;
}

.rid-load-wrapper__loader i+i {
    left: 0;
    top: -4px;
    transform: scale(1) rotate(45deg);
}

.rid-load-wrapper__loader i+i+i {
    left: 8px;
    top: 0;
    transform: scale(1) rotate(60deg);
}

@keyframes rid-icon {
    40% {
        left: 0;
        top: 0;
        transform: scale(1) rotate(0);
    }

    60% {
        left: 0;
        top: 0;
        transform: scale(1) rotate(0);
    }
}
</style>