时间戳

首页 > 解决方案 > 将 webSDK 与 jQuery Inside Vue 组件集成？

javascript - 将 webSDK 与 jQuery Inside Vue 组件集成？

问题描述

我正在尝试将来自https://www.pollfish.com/docs/webplugin的 webSDK 集成到我们的 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>

标签： javascriptjqueryvue.jsvuejs2

解决方案

为了将我们的网络插件集成到您的 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')
});

推荐阅读