Extending the Tinypass Meter
Developers can hook into Tinypass meter functionality by providing callback methods. To register a callback provide a reference to the your callback method in the _tpm configuration object.
Adding a Callback to your Meter Configuration
5: <script type="text/javascript"> 6: 7: window._tpm = window._tpm || []; 8: window._tpm['paywallID'] = 'MYID'; 9: window._tpm['trackPageview'] = true; 10: 11: //register your callback here 12: window._tpm['onMeterExpired'] = 'myExpiredMethod'; 13: 14: </script>
Available callbacks
onMeterExpired( meterDetails )
This callback is executed when a user's meter is expired.
Arguments:
- meterDetails: JS data object containing details about the current meter
onMeterActive( meterDetails )
This callback is executed when a user's meter is active. The user has not made a purchase yet and access is not yet denied.
Arguments:
- meterDetails: JS data object containing details about the current meter
onAccessGranted ( accessDetails )
This callback is executed when a user has access to the protected content.
Arguments:
- accessDetails: data object containing details about the current user's access information
onShowOffer ( meter )
This callback is executed when the page is about to show the end-user the curtain or reminder offer. This method can also cancel this event by returning false. A return value of 'false' will prevent the Tinypass code from showing the offer and instead this responsibility will be with the publisher's code.
Arguments:
- meter: This object is internal but features the property 'offerElem' which is the embeddable iframe element of your curtain or reminder
Example of Embedding the Curtain in a custom element:
5: window._tpm['onShowOffer'] = function(meter){ 6: 7: myHTMLElement.append(meter.offerElem); 8: animate(myHTMLElement) 9: 10: //return false to stop default behaviour 11: return false; 12: 13: }
Callback arguments
meterDetails
This JS object contains data around the current user's meter as well as global meter information.
The relevant fields are:
- max_views: the total number of views allowed in this meter
- views: number of views the current user has
- views_left: remaining number of views for the current user
Example:
{ "max_views": 10, "views": 6, "views_left": 4 }
accessDetails
This object contains data for the current user's access information
- max_views: the total number of views allowed in this meter
- expires: epoch/unix time when the current user's access period will end
Example:
{ "expires": 1373481184, "max_views": 3, }
Example Integration
Below is sample code showing basic integration with the meter callbacks.
For demonstration purposes we are using the JQuery library but you could use any library of your choose as there is no dependency on JQuery.
8: <script> 9: /** 10: * onMeterActive 11: */ 12: window._tpm['onMeterActive'] = function(meterDetails){ 13: console.log("Meter is active"); 14: //display the meter info for the user in a friendly way 15: $("body").append('<div class="status">' + meterDetails.views + ' of ' + meterDetails.max_views + '</div>'); 16: } 17: /** 18: * onMeterExpired 19: */ 20: window._tpm['onMeterExpired'] = function(meterDetails ) { 21: console.log("Meter is expired"); 22: 23: //display the meter info for the user in a friendly way 24: $("body").append('<div class="status">' + meterDetails.views + ' of ' + meterDetails.max_views + '</div>'); 25: } 26: /** 27: * onAccessGranted 28: */ 29: window._tpm['onAccessGranted'] = function(accessDetails) { 30: //format the epoch using Date 31: var exp = new Date(0); 32: exp.setUTCSeconds(accessDetails.expires); 33: console.log("Access granted (Expires: " + exp + ")"); 34: $("body").append('<div class="status">Member</div>'); 35: } 36: 37: /** 38: * onCheckoutSuccess 39: */ 40: window._tpm['onCheckoutSuccess'] = function(){ 41: console.log("Checkout success!"); 42: //simple reload of page when purchase is successfull 43: location.reload(); 44: } 45: /** 46: * onShowOffer 47: */ 48: window._tpm['onShowOffer'] = function(meter){ 49: console.log("onShowOffer"); 50: $("#offer-holder").append(meter.offerElem); 51: $("#offer-holder").fadeIn('slow'); 52: return false; 53: } 54: 55: </script>