PronounsPage/components/AdPlaceholder.vue

<template>
    <div v-if="config.ads && config.ads.enabled && active"
         :class="[adPlaceholdersVisible ? 'ad-placeholder-preview' : '']">
        <template v-if="adPlaceholdersVisible">
            <p class="text-center h5">{{phkey}}</p>
            <Debug :v="adConfig"/>
        </template>
        <div v-else-if="adConfig.waldo" :class="['adsbynewor', adConfig.video ? 'waldo-video-tag' : '']" :id="'waldo-tag-' + adConfig.slotId"></div>
        <ins v-else-if="adConfig.adsense" class="adsbygoogle"
             style="display:block;margin-block: 1em;"
             data-ad-client="ca-pub-8518361481036191"
             :data-ad-slot="adConfig.slotId"
             :data-ad-format="adConfig.adFormat"
             :data-ad-layout="adConfig.adLayout"
             :data-full-width-responsive="adConfig.responsive ? 'true' : ''"
             role="alert"
             :data-label="$t('support.ad')"></ins>
        <div v-else
             :class="['adsinternal', 'text-center', 'py-3', adConfig.display]"
             :data-label="$t('support.ad')">
            <a :href="adConfig.link" target="_blank" rel="noopener">
                <img :src="`/banners/${adConfig.image}`" class="border shadow" :alt="adConfig.alt" style="max-width: 100%"/>
            </a>
        </div>
    </div>
</template>

<script>
import adPlaceholders from "../src/adPlaceholders";
import { adsInternalPerPlaceholder } from "../src/adsInternal";
import {mapState} from "vuex";
import {randomItem} from "../src/helpers";

export default {
    props: {
        phkey: {required: true},
    },
    data() {
        if (adsInternalPerPlaceholder[this.phkey]) {
            return {
                active: true,
                adConfig: randomItem(adsInternalPerPlaceholder[this.phkey]),
            }
        }

        if (!adPlaceholders[this.phkey]) {
            return { active: false, adConfig: {} }; // FIXME
        }

        const {slotId, adFormat, adLayout = null, responsive = false, video = false} = adPlaceholders[this.phkey];
        return {
            active: true,
            adConfig: {
                waldo: true,
                slotId,
                adFormat,
                adLayout,
                responsive,
                video,
            }
        }
    },
    mounted() {
        if (!process.client) { return; }
        (window.adsbygoogle = window.adsbygoogle || []).push({});
    },
    computed: {
        ...mapState([
            'adPlaceholdersVisible',
        ]),
    },
}
</script>

<style lang="scss">
.ad-placeholder-preview {
    background-color: #b2caec;
    width: 100%;
    height: 200px;
    padding: 1em;
}

.adsbygoogle:not(:empty), .adsinternal:not(:empty), .adsbynewor:not(:empty) {
    text-decoration: none;
    &:before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
    }
}
</style>