Интегрировать webSDK с jQuery Внутри Vue Компонентом?

Question

Я пытаюсь интегрировать webSDK из https://www.pollfish.com/docs/webplugin в наше приложение Vue.

В идеале я хочу загрузить jquery только в один компонент.

Я написал следующий код, но когда я нажимаю кнопку, она не работает.

Вот пример с рабочим кодом, который НЕ использует Vue https://github.com/pollfish/webplugin-rewarded-example/blob/master/index.html, но работает локально .

Я не получаю ошибок и могу console.log(Pollfish) в методе showFullSurvey.

Мой код:

<template>
    <div class="container" v-if="isFreePlan">
        <h2>Remove ads and save unlimited projects for 5 days</h2>
        <button @click="showFullSurvey">Take {{lengthOfInteraction}} Survey Now</button>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
    data() {
        return {
            surveyAvailable: false,
            lengthOfInteraction: ''
        }
    },
    methods: {
        showFullSurvey() {
            Pollfish.showFullSurvey();
            console.log('show survey')
        }
    },
    mounted() {
        const pollFishConfig = {
            api_key: "api-key",
            debug: process.env.NODE_ENV === 'production' ? false : true,
            ready: () => {},
            uuid: this.userId,
            surveyAvailable: onSurveyAvailable,
            surveyNotAvailable: onSurveyNotAvailable,
            surveyCompletedCallback: onSurveyCompleted,
            userNotEligibleCallback: onUserDisqualified
        };
        console.log('POllfish config');

        const onSurveyAvailable = (data) => {
            console.log('SUrvey Available');
        };
        const onSurveyNotAvailable = () => {
            console.log('SUrvey Not Available');
        };
        const onSurveyCompleted = () => {
            console.log('SUrvey Completed');
        };
        const onUserDisqualified = () => {
            console.log('USer Disqualified');
        };
        this.addJQuery;
        this.addPollFishSDK;            
    },
    computed: {
        ...mapGetters("session", ['userId']),
        ...mapGetters("account", ["isFreePlan"]),
        addJQuery() {
            const url = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js';
            if(document.querySelector(`script[src='${url}']`)){ return; }
            let jquery = document.createElement('script');
            jquery.setAttribute('src', url);
            document.body.appendChild(jquery);
            console.log('jquery script')
        },
        addPollFishSDK() {
            const url = 'https://storage.googleapis.com/pollfish_production/sdk/webplugin/pollfish.min.js';
            if(document.querySelector(`script[src='${url}']`)){ return; }
            let pollFishSdk = document.createElement('script');
            pollFishSdk.setAttribute('src', url);
            document.body.appendChild(pollFishSdk);
            console.log('pollfish script')
        }
    }
}
</script>

Answer 1

Чтобы интегрировать наш веб-плагин в ваше приложение Vue. js, вам необходимо установить в окне объект pollfishConfig. Пожалуйста, будьте осторожны с именем объекта, которое будет точно таким же, как в следующем примере.

window.pollfishConfig = {
  api_key: "api-key",
  debug: process.env.NODE_ENV === 'production' ? false : true,
  ready: () => {},
  uuid: this.userId,
  surveyAvailable: onSurveyAvailable,
  surveyNotAvailable: onSurveyNotAvailable,
  surveyCompletedCallback: onSurveyCompleted,
  userNotEligibleCallback: onUserDisqualified
};

Кроме того, исходя из вашего примера, вы должны быть уверены, что библиотека jQuery загружена первой и будет доступна для нашего WebPlugin SDK. Поэтому вам нужно обработать событие onload . Вот пример решения на основе вашего кода:

const addScript = (url, onLoad) => {
  const scriptExists = document.querySelector(`script[src='${url}']`);

  if (!scriptExists) {
    let script = document.createElement('script');

    document.body.appendChild(script);

    script.onload = () => {
      onLoad && onLoad();
    }

    script.src = url;
  }
}

addScript('https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', () => {
  addScript('https://storage.googleapis.com/pollfish_production/sdk/webplugin/pollfish.min.js')
});