Skip to main content

Tracking Twitter Tweets

Updated

You can easily use TUNE to track valid Tweets from Twitter as conversions. This allows you to compensate partners for providing users that tweet about your product or service. The code works by Twitter calling the loadConversionPixel function once a user has successfully Tweeted. Then the loadConversionPixel function loads the conversion tracking pixel.

Tweet Button

Place the code below on the page where you want the Twitter button to render. In the link tag, you’ll need to update the URL value to be the URL of the page you wish users to tweet about as well as the “via” value. “Via” describes who provided the content that is being tweeted. In most cases, you will want to submit your company’s Twitter handle here.

<a href="http://twitter.com/intent/tweet?url=http://example.com;via=XXX" class="twitter-share-button">Tweet</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
  function handleTweetEvent(event){
    if (event) {
      loadConversionPixel();
    }
  }
  twttr.events.bind('tweet', handleTweetEvent);
// ]]></script>

When a user successfully tweets, the code calls the loadConversionPixel() function which displays the conversion pixel. You can also modify the size and layout of the Twitter button at this time. For more information on customizing the look and functionality of the button. Learn more here: https://dev.twitter.com/docs/tweet-button

Conversion Pixel

Create an offer in your TUNE network for this Tweet campaign or create a new “Offer Goal” for tweets. Set the conversion tracking protocol on the offer as an HTTP iFrame pixel. In the head, you’ll need to place the code below. Replace the example conversion pixel with the conversion tracking pixel for the offer you’ve created in your TUNE network. If you already load jquery on your webpage, then you won’t need to include the jquery line of code at the beginning of this example.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
  function loadConversionPixel(){
    // display HasOffers conversion tracking pixel
    $('#fb-root').append('<iframe src="http://demo.go2jump.org/aff_l?offer_id=506" scrolling="no" frameborder="0" width="1" height="1"></iframe>');
  }
// ]]></script>

Before the close of your body tag on your webpage, input the following div so that once the user successfully tweets, the conversion pixel loads inside the div.

<div id="ho-pixels"></div>

Full Sample Code

<!DOCTYPE html>
<html>
<head>
<title>Twitter Tweet Button</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
  function loadConversionPixel(){
    // display HasOffers conversion tracking pixel
    $('#ho-pixels').append('<iframe src="http://demo.go2jump.org/aff_l?offer_id=506" scrolling="no" frameborder="0" width="1" height="1"></iframe>');
  }
// ]]></script>
</head>
<body>
<!-- Place this tag where you want the tweet to render -->
<a href="http://twitter.com/intent/tweet?url=http://test2.com;via=stack" class="twitter-share-button">Tweet</a>

<!-- Place this render call where appropriate -->
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
function handleTweetEvent(event){
if (event) {
loadConversionPixel();
}
}
twttr.events.bind('tweet', handleTweetEvent);
// ]]></script>

<div id="ho-pixels"></div>

</body>
</html>

If you’re having issues with the script working in IE, you’ll need to make sure you have the doctype set properly. Learn about the IE issue here: https://dev.twitter.com/discussions/3102

 

Related articles