TrackThePack has just released a commercial version of their popular website mashup that allows e-commerce store owners (really any website publisher) to add a tracking tool to their website. The service will track packages from UPS, FedEx, DHL and USPS shipping carriers and integrates with Google Maps to give you a visual representation of the package’s route.

TrackThePack is very simple to integrate and just requires a short JavaScript snippet be added to one of your pages with the tracking number inserted. Most people will want to use some kind of form, so I’ve put together a simple script that will let you create links to send to customers in emails, but will also allow a user to copy/paste a tracking number into a form field. I’ve posted some sample PHP code at the end of the post.

TrackThePack offers their API and tracking service for as little as $0.02 per tracked package. Users can track their package as many times as they want – you’re charged per tracking ID not per lookup.

I integrated TrackThePack into 2BigFeet.com and just had to change a few of the JavaScript variables to get it looking very nice. We plan on making some tweaks before rolling this out to our customers, but it looks like a very easy way to add order tracking to your website for very low cost.

In addition to using an input form on your website, you can send customers automated emails linking directly to the form on your website. For instance:

http://www.mysite.com/track.php?packageid=1Z1234567890123

Head over to TrackThePack’s website and sign up for an account for free and start testing. Grab the code below for an easy tracking form in PHP.

<?php if ( isset($_GET
['packageid']) ) { ?>
 
 <script type="text/javascript">
 var ttp_number = "<?= $_GET['packageid']; ?>"; // Tracking number
 var ttp_width = "500"; // Change if needed, or comment out for default
 var ttp_height = "600"; // Change if needed, or comment out for default
 var ttp_m_width = "200"; // Change if needed, or comment out for default
 var ttp_m_height = "200"; // Change if needed, or comment out for default
 var ttp_key="YOURCODEHERE";(function(){document.write('<div id="ttp"></div>');s=document.createElement('script');s.type="text/javascript";s.src="http://trackthepack.com/javascript/embed.js?" + Math.random();setTimeout("document.getElementById('ttp').appendChild(s);",1);})()
 </script>
 
<?php } else { ?>

<p>Please enter your tracking number below:</p>

<form action="<?= $_SERVER['PHP_SELF']; ?>" method="get">
 <p><input type="packageid" name="packageid" value="" size=40></p>
 <p><input type="submit" value="Track Your Package"></p>
</form>

<?php } ?>