Integrated Ads

/**
 * Dynamically generates an ad and inserts it into the template when the Viafoura conversations widget requests an ad.
 * @param  {String} slotName - id of the element to render the ad in
 */
function generateCommentAd(slotName) {
  // CONVERSATIONS AD INTEGRATION CODE HERE
}

/**
 * Dynamically generates an ad and inserts it into the template when the Viafoura liveblog widget requests an ad.
 * @param  {String} slotName - id of the element to render the ad in
 */
function generateLiveblogAd(slotName) {
  // LIVEBLOG AD INTEGRATION CODE HERE
  // Liveblog ads can be configured similarly to conversations
}

/**
 * Dynamically generates an ad and inserts it into the template when the Viafoura trending conversations widget requests an ad.
 * @param  {String} slotName - id of the element to render the ad in
 */
function generateContentRecirculationAd(slotName) {
  // TRENDING CONVERSATIONS AD INTEGRATION CODE HERE
  // Configure similarly to Comments, except
  // the ad size is limited to 300x250
}
/**
 * Dynamically generates an ad and inserts it into the template when the Viafoura trending conversations widget requests an ad.
 * @param  {String} slotName - id of the element to render the ad in
 */
function requestStandaloneAd(slotName) {
  // STANDALONE AD INTEGRATION CODE HERE
  // Configure similarly to Comments, except
  // the ad size is limited to 300x250
}
/**
 * Dynamically generates an ad and inserts it into the template when the Viafoura trending conversations widget requests an ad.
 * @param  {String} slotName - id of the element to render the ad in
 */
function requestConversationStarter(slotName) {
  // CONVERSATION STARTER AD INTEGRATION CODE HERE
  // Configure similarly to Comments, except
  // the ad size is limited to 300x250
}

// Subscribe to the viafoura event when the viafoura object is ready
window.vfQ = window.vfQ || [];
window.vfQ.push(function() {
   // Provide the desired ad generation functions as callbacks to the appropriate events:
   window.vf.$subscribe('vf-ads', 'requestCommentAd', generateCommentAd);
   window.vf.$subscribe('vf-ads', 'requestLiveblogAd', generateLiveblogAd);
   window.vf.$subscribe('vf-ads', 'requestContentRecirculationAd', generateContentRecirculationAd);
   window.vf.$subscribe('vf-ads', 'requestStandaloneAd', requestStandaloneAd);
   window.vf.$subscribe('vf-ads', 'requestConversationStarter', requestConversationStarter);
});

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
   var gptadslots = [];
   var googletag = googletag || { cmd: [] };
   googletag.cmd.push(function() {
       googletag.pubads().enableSingleRequest();
       googletag.pubads().disableInitialLoad();
       googletag.enableServices();
   });
</script>

<script>
/**
 * Dynamically generates an ad and inserts it into the template when the Viafoura conversations widget requests an ad.
 * Adapted from: https://support.google.com/dfp_premium/answer/4578089?hl=en#infiniteContents
 * @param  {String} slotName - id of the element to render the ad in
 */
function generateCommentAd(slotName) {
    // Generate next slot name
    var adUnitString = '/1234/travel/asia'; // Replace this sgring with your network code and ad units
    var size = [300, 250]; // map your allowed ad sizes to fit space, but we recommend not using very tall ads and using ad size mapping for different device sizes. See ad size mapping below
    // Define the slot itself, call display() to
    // register the div and refresh() to fetch the ad.
    googletag.cmd.push(function() {
        // Destroy any lingering ad slots if they exist in the widget
        const slots = googletag.pubads().getSlots()
            .filter((slot) => slot.getSlotElementId() === slotName);
        googletag.destroySlots(slots);
        // Define ad sizes based on viewport size
        // NOTE ads are not responsive but new ads will be rendered to the appropriate size
        // Adapted from https://support.google.com/dfp_premium/answer/4578089?hl=en#responsiveDesign
        var mapping = googletag.sizeMapping()
            .addSize([100, 100], [88, 31]) // Small ad
            .addSize([320, 400], [[320, 50], [300, 50]]) // Accepts both common mobile banner formats
            .addSize([320, 700], [300, 250]) // Same width as mapping above, more available height
            .addSize([750, 200], [300, 250]) // Landscape tablet
            .build();
        // Create a new ad slot, pointing to the slotName given to this function
        var slot = googletag.defineSlot(adUnitString, size, slotName)
            .defineSizeMapping(mapping)
            .addService(googletag.pubads());
            // Add any targeting or any other modifications to the ad here
        // Display the new ad
        googletag.display(slotName);
        googletag.pubads().refresh([slot]);
    });
};
// Subscribe to the viafoura event when the viafoura object is ready
window.vfQ = window.vfQ || [];
window.vfQ.push(function() {
    window.vf.$subscribe('vf-ads', 'requestCommentAd', generateCommentAd);
});
</script>

/**
 * Renders an ad from your ad provider when the Viafoura conversations widget requests an ad.
 * @param  {String} slotName - id of the element to render the ad in
 */
function generateCommentAd(slotName) {
  // YOUR AD PROVIDER'S CODE HERE
  // Render the ad into the element whose id is slotName.
  // The widget already shows this element, so you don't need to display it yourself.
}

// Subscribe to the viafoura event when the viafoura object is ready
window.vfQ = window.vfQ || [];
window.vfQ.push(function() {
   window.vf.$subscribe('vf-ads', 'requestCommentAd', generateCommentAd);
});

<meta property="vf:ads-disabled">

.vf3-conversations-list__promo {
    display: none;
}

<div class="viafoura">
  <vf-standalone-ad></vf-standalone-ad>
</div>

/* BAD */
iframe {
    max-width: 100%;
}

/* BETTER */
iframe {
    max-width: none;
}

.my-own-iframe-class {
    max-width: 100%;
}