google / .github Goto Github PK

          Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

  var rewardedSlot;
  googletag.cmd.push(function() {
    rewardedSlot = googletag.defineOutOfPageSlot(
        '/22639388115/rewarded_web_example',
        googletag.enums.OutOfPageFormat.REWARDED);

    // Slot returns null if the page or device does not support rewarded ads.
    if (rewardedSlot) {
      rewardedSlot.addService(googletag.pubads());

      googletag.pubads().addEventListener('rewardedSlotReady', function(event) {
        document.getElementById('watchAdButton').onclick = function() {
          event.makeRewardedVisible();
          displayModal();
        }

        displayModal('reward', 'Watch an ad to receive a special reward?');
      });

      googletag.pubads().addEventListener('rewardedSlotClosed', dismissRewardedAd);

      googletag.pubads().addEventListener('rewardedSlotGranted', function(event) {
        // Automatically close the ad by destroying the slot.
        // Remove this to force the user to close the ad themselves.
        dismissRewardedAd();

        var reward = event.payload;
        displayModal('grant', 'You have been rewarded ' + reward.amount + ' '
                                                        + reward.type + '!');
      });

      googletag.enableServices();
      googletag.display(rewardedSlot);
    }
  });

  function dismissRewardedAd() {
    displayModal();
    googletag.destroySlots([rewardedSlot]);
  }

  function displayModal(type, message) {
    var modal = document.getElementById('modal');
    modal.removeAttribute('data-type');

    if (type) {
      document.getElementById('modalMessage').textContent = message;
      modal.setAttribute('data-type', type);
    }
  }
</script>
<style>
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 300px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
  }

  .modal[data-type] {
    display: block;
  }

  .modalDialog {
    margin: auto;
    padding: 25px;
    background-color: white;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .grantButtons,
  .rewardButtons {
    display: none;
  }

  .modal[data-type='grant'] .grantButtons,
  .modal[data-type='reward'] .rewardButtons {
    display: block;
  }

  .modal input[type="button"] {
    padding: .5rem;
    background: blue;
    border: none;
    border-radius: 4px;
    margin: 4px;
    color: white;
  }
</style>

    <span class="grantButtons">
      <input type="button" onclick="dismissRewardedAd();" value="Close" />
    </span>

    <span class="rewardButtons">
      <input type="button" id="watchAdButton" value="Yes" />
      <input type="button" onclick="dismissRewardedAd();" value="No" />
    </span>
  </div>
</div>