Integrate webSDK with jQuery Inside Vue Component?

Question

I am trying to integrate the webSDK from https://www.pollfish.com/docs/webplugin in our Vue app.

Ideally I want to load jquery only in one component.

I wrote the following code but when I click the button it doesnt work.

Here is an example with working code that does NOT use Vue https://github.com/pollfish/webplugin-rewarded-example/blob/master/index.html but does run locally.

I get no errors and I can console.log(Pollfish) inside the the showFullSurvey method.

My code is:

<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>

score 2 · Answer 1 · answered Feb 17 '20 at 15:35

In order to integrate our web plugin in your Vue.js app, you need to set the pollfishConfig object in the window. Please be careful with the object's name to be exactly the same as the following example.

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
};

Also, based on your example, you need to be sure that the jQuery library is loaded first and be available for our WebPlugin SDK. So you need to handle the onload event. An example solution based on your code is the following:

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')
});

Integrate webSDK with jQuery Inside Vue Component?

1 Answers1