All posts by Ranjith Kumaran

Reward users for watching videos on your site (The easy version)

We received a lot of good feedback about our last post on rewarding users for viewing YouTube videos. One common request was how to use the standard YouTube player instead of the (chromeless) custom player. In this example the standard player is used but the viewer must watch the entire video, start to finish, in order to get points (in the previous example you could set a minumum viewing time). The good news is that this makes the code much simpler.

Here’s a link to the demo (earn 100 points by watching the entire video!) and the full code is below.

<html>
<head>
  <title>Simple YouTube demo</title>
</head>
<body>
  <h1>Reward users for watching YouTube videos with PunchTab</h1>
  <p>Watch the entire video and earn 100 points!</p>
  <!-- embed the player --!>
  <div id="ytplayer"></div>

  <!-- include YouTube library --!>
  <script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>
  // numstarts tracks how many times video was started (including skips)
  var numstarts = 0;
  function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("ytplayer");
    ytplayer.addEventListener('onStateChange', 'stateChange');
  }
  function embedYouTubePlayer(videoID, containerID, width, height) {
    swfobject.embedSWF('http://www.youtube.com/e/' + videoID + '?enablejsapi=1&playerapiid=ytplayer&rel=0', containerID, width, height, '8', null, null, { allowScriptAccess: 'always' }, { id: containerID });
  }
  function stateChange(state) {
    switch(state) {
      case 0:
      // Video ended
        if(numstarts == 1) // user started video just once
          _ptq.push(["watch",{'points':100}]);
        // clear numstarts in case user wants to try again
        numstarts = 0;
        break;
      case 1:
      // Video started, skips will be registered as additional starts
        numstarts += 1;
        break;
    }
  }
  // change video id below to your own
  embedYouTubePlayer('nUoP0lMW1fw', 'ytplayer', 425, 356);
</script>

<!-- PunchTab code --!>
<script type="text/javascript" charset="utf-8">
  var _ptq = _ptq || [];
  var _punchtab_settings = {
    key: "YOURKEYHERE",
    display: "tab",
    position: {x:"right", y:"bottom"}
  };

  (function() {
    var pt = document.createElement('script'); pt.type = 'text/javascript'; pt.async = true;
    pt.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'static.punchtab.com/js/pt.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(pt, s);
  })();
</script>
</body>
</html>

PunchTab Awards 100MM Loyalty Points!

We hit a couple of pretty awesome milestones at the end of 2011 and we’re proud to share the news: PunchTab loyalty programs are now on nearly 4000 sites and over 100 million points have been awarded.

Today is my official one year mark as PunchTab Founder and CEO and I’m really proud of the team we’ve constructed and feel like we’ve accomplished so much in the last several months. I’m really confident that 2012 will bring even more success.

We’re passionate about what we’re doing and very committed to building the best products on the market. We’re beyond thankful for the early customers who have provided feedback and suggestions to help us shape PunchTab’s offerings into the loyalty platform they’ve needed and we’re looking forward to doing more of the same this year. 


Happy new year all, really looking forward to the next 12 months.

Reward users for watching YouTube videos on your site

We’ve been asked a number of times about how to use the PunchTab SDK to reward-enable video views. Here’s a quick and dirty tutorial video (from our retro “found footage” archive) that shows one way to do it. Some useful code and a few notes are also included below. In the future you’ll see automated widgets from us that non-developers can use as well.

A live demo can be found here: http://www.hitvu.com/yt

Notes:

1. Link to the Chromeless YouTube Player example used for this tutorial:
http://code.google.com/apis/youtube/chromeless_example_1.html
2. The player that we used is bare-bones. You can add different controls and customize the UI by referring to the Chromeless YouTube Player example.
3. This tutorial only rewards the viewer for their first video view of the day.

Code:

...
  <head>
    <!-- Use the Google AJAX Libraries API:
        http://code.google.com/apis/ajaxlibs/ -->
    <script src="//www.google.com/jsapi"></script>
    <script>
      google.load("swfobject", "2.1");
    </script>
    <script type="text/javascript">
        function onYouTubePlayerReady(playerId) {
          ytplayer = document.getElementById("myytplayer");
        }
        function loadNewVideo(id, startSeconds) {
          if (ytplayer) {
            ytplayer.loadVideoById(id, parseInt(startSeconds));
          }
        }
	function thanks() {
	  _ptq.push(["watch",{'points':100}]);
	}
        function play() {
	  loadNewVideo("nUoP0lMW1fw",0); // replace with your video id
	  setTimeout(thanks, 5000);     // 10 seconds before giving 100 pts
          if (ytplayer) {
            ytplayer.playVideo();
          }
        }
    </script>
  </head>
...
  <body>
...
    <a href="javascript:void(0);" onclick="play();">Play</a> <br>
    <!-- embed the player -->
    <div id="ytapiplayer">
      You need Flash player 8+ and JavaScript enabled to view this video.
    </div>
    <script type="text/javascript">
      // <![CDATA[

      // allowScriptAccess must be set to allow the Javascript from one 
      // domain to access the swf on the youtube domain
      var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
      // this sets the id of the object or embed tag to 'myytplayer'.
      // You then use this id to access the swf and make calls to the player's API
      var atts = { id: "myytplayer" };
      swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
                         "ytapiplayer", "400", "300", "8", null, null, params, atts);
      //]]>
    </script>
...
    <!-- PunchTab code --!>
...
  </body>

New month = new rewards and new daily earning opportunities

So it’s been a while since we put new rewards in the catalog.  Here’s why:
We had a few requests in the past about not rotating the rewards out so often. However we then received a lot of feedback last month about continuing to have new surprises every month too. Guess we’ll have to figure out the right cadence for this…

That being said we’re happy to feature a new entry this month: a $10 gift card from Barnes & Noble. This one is limited to 1 per user as supplies are limited and we want to spread the love. There’s a chance that we’ll add one more special reward this month, we’re working on it as I type.

We’ve also added more daily earning opportunities for you to get more points every day. Specifically, our very popular Foursquare check-in system that has been rolled out by dozens of sites who are using PunchTab to power their loyalty systems. If you see that the program you’re part of has claimed their Foursquare venue make sure to visit often. If you don’t see it then gently remind the site owner. ;)

As always, let us know what you’d like to see and we’ll do our best to make PunchTab more and more fun.