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>

57 Comments

  1. Test

    Testing points

  2. Adam

    testing

  3. Adam

    testing…

  4. Dai

    awesome!

  5. Thanks! I did have a few questions:

    Is it possible to rewards points for watching more than once a day?
    Is it possible to do this with standard youtube embeds?

  6. Ranjith Kumaran (Author)

    Right now it’s limited to one view per day, however we have an upcoming method that will let you do as many as you want. Can you shoot us an email to support@punchtab.com so we can get you early access when it’s ready?

    As for standard YouTube embeds the trick is really to ensure that the user views for a reasonable amount of time (in this case 10 seconds) which is why we used the custom player.

  7. Dai

    gotta take the time to check thing out!

  8. This would be awesome if it were implemented by default. I’m a little lost on what code I need to add to enable points for the views. I have tons of videos and everytime I post a video it get’s 400-500 views easily on the first day. I would love to implement this on my site but, need a little guidance.

  9. Sally

    can’t get it to work

  10. Ranjith Kumaran (Author)

    We’d like to pick these up automatically but it looks like you can’t do it for a standard YouTube embed. We’ve got a simpler method coming up, will do an update (hopefully in the next week).

  11. Ranjith Kumaran (Author)

    Shoot a note to support@punchtab.com and we’ll help.

  12. mehdi

    youtube FTW

  13. Stacy

    great concept and explanation!

  14. Chris Y.

    i want this now

  15. wira

    nice waw….

  16. Stavros

    nice!!!!!!!

  17. this is what i want!!!!!!!!!

  18. Khan Academy awards points for YouTube video views. They award 750 points for each video. You can only get the points once per video and the points add up the longer you watch. Does anyone know how to do this?

  19. defhead

    kihb

  20. Chris Y.

    im not really seeing point-giving videos on any sites

  21. Jonelle

    I have not seen any of the video points either…

  22. sgoogler

    Nice ;-)

  23. Zgoogler

    Good!_

  24. Brandy Shields

    Sounds good!

  25. Stacy

    wow that’s a great way to draw in more fans

  26. jiujiujiu

    wow

  27. Haimamamia

    nice

  28. Haimamamia

    Awesome all

  29. Betty

    comments not working, says duplicate posting for me. i’m not sure why.

  30. guest

    i wish i stuck w/ matlab longer

  31. abc

    worri+ing~ya~!!

  32. abc

    Reward users for watching videos on your site (The easy version) | PunchTab:Blog

  33. abc

    (The easy version) | PunchTab:Blog

  34. abc

    (The easy version)

  35. abc

    ajk~~laura

  36. Praveen Vishnu Shamain

    Very good.

  37. lunelune

    ok this is ok

  38. Dalto

    Nice!

  39. Major follows some sports, primarily during the playoffs.

    Caution: when a hole is made in a can, there may be
    metallic edges that can cut one’s mouth. You can only acquire a small amount of in-game money or gold, and cannot participate in the auction house, send mail, join guilds, or even whisper to someone unless someone whispers to you first.

  40. (Game scheduled for December 15th with Utah State playing Toledo).
    Just last year Apple sold more than one hundred million
    i – Phone and i – Pad apps. Online gaming is a popular way to spend
    enjoyable time at a low cost for hours on end.

  41. There are also significant role that your cake can play in your wedding
    day. If you prefer to use frozen strawberries, they work in this
    cake equally as well as the fresh. The TV crew will embark on the task of helping “sweet” businesses survive and prosper.

Trackbacks for this post

  1. Reward users for watching videos on your site (The easy version) | PunchTab:Blog