Nascent Plasticine Materialist

    @freestar/pubfig-adslot-vue-component

    2.0.0 • Public • Published

    Freestar Pubfig Ad Slot Vue Component

    NOTE: As of v2.0, the plugin must be installed using Vue.use()

    Install

    npm install --save @freestar/pubfig-adslot-vue-component

    In your Vue app entry point add the following:

    import FreestarAdSlot from '@freestar/pubfig-adslot-vue-component';
    
    Vue.use(FreestarAdSlot, { publisher: 'publisherString' });

    Options

    • publisher A required string of the publisher, which will be provided by Freestar.

    Usage

    <template>
      <div>
        <freestar-ad-slot
          :ad-refresh="adRefreshCount"
          :placement-name="adUnit.placementName"
          :targeting="adUnit.targeting"
          :channel="channel"
          :class-list="classList"
          @new-ad-slots="onNewAdSlotsHook"
          @delete-ad-slots="onDeleteAdSlotsHook"
          @ad-refresh="onAdRefreshHook"
        />
        <button @click="onAdRefresh">
          Trigger Refresh
        </button>
      </div>
    </template>
    
    <script>
      export default {
        name: 'Demo',
        data() {
          return {
            adUnit: {
              placementName: 'div-gpt-ad-leaderboard-multi',
              slotId: 'div-gpt-ad-leaderboard-multi',
              targeting: { key1: 'value1', key2: 'value2' },
            },
            channel: 'custom_channel',
            classList: ['m-30', 'p-15', 'b-thin-red'],
            adRefreshCount: 0,
          };
        },
        mounted() {
          this.$nextTick(() => {
            this.createAdRefreshExample();
          });
        },
        methods: {
          onNewAdSlotsHook(placementName) {
            console.log('freestar.newAdSlots() was called', { placementName });
          },
          onDeleteAdSlotsHook(placementName) {
            console.log('freestar.deleteAdSlots() was called', { placementName });
          },
          onAdRefreshHook(placementName) {
            console.log('adRefresh was called', { placementName });
          },
          // example of manually refreshing an ad
          onAdRefresh() {
            this.adRefreshCount += 1;
          },
          createAdRefreshExample() {
            // example of automatically refreshing an ad every 5 seconds a total of 5 times
            const interval = setInterval(() => {
              const maxRefreshes = 5;
              this.adRefreshCount += 1;
              if (this.adRefreshCount === maxRefreshes) {
                clearInterval(interval);
              }
            }, 5000);
          },
        },
      };
    
    </script>
    
    <style>
      .m-30 {
        margin: 30px;
      }
    
      .p-15 {
        padding: 15px;
      }
    
      .b-thin-red {
        border: 1px solid red;
      }
    </style>

    Props

    placementName A required string of the ad unit placement, which will be provided by Freestar.

    targeting An optional object of key/value pairs for targeting.

    channel An optional string of a custom channel to use.

    classList An optional array of strings representing any additional classes that should be applied to the wrapper dom element of the ad slot.

    adRefresh An optional number bound to the ad refresh. You can increment this value to trigger a refresh of the ad slot.

    Events

    new-ad-slots returns the placementName when the component mounts and an ad is requested.

    delete-ad-slots returns

    ad-refresh returns the placementName when the component refreshes an ad.

    API Methods

    this.$freestar.setPageTargeting(key, value) Proxy for the GPT setTargeting call to set page level targeting. See GPT documentation for more details

    this.$freestar.clearPageTargeting(key) Proxy for the GPT clearTargeting call to clear page level targeting. See GPT documentation for more details

    this.$freestar.trackPageView() Proxy for the freestar.trackPageview() method.

    Freestar collects data values such as url location which is then used in various tables. In order to properly track data sites that are using Single Page Applications (SPAs), or sites with slideshows/carousels that change urls/url parameters these new actions must be taken by the publisher to assure accuracy of the collected data. When the location and/or url is updated the lifecycle of the DOM and/or Window does not reload the pubfig.js script. In order to address this the publisher must invoke the freestar.trackPageview() method. This will ensure that the new url is stored and used throughout the data collection for that page or view.

    Glossary

    placementName A value acquired from Google Ad Manager (previously known as DFP/Adx), which will be provided by Freestar.

    targeting A set of targeting values for the ad unit placement.

    Bypassing Freestar Ad Placements

    If you would like to bypass Freestar Ad placements and render GAM ad units yourself directly please follow the instructions here

    Install

    npm i @freestar/pubfig-adslot-vue-component

    DownloadsWeekly Downloads

    7

    Version

    2.0.0

    License

    ISC

    Unpacked Size

    308 kB

    Total Files

    3

    Last publish

    Collaborators

    • ialex
    • freestar_engineering
    • premesh
    • kkawai