Skip to main content

Tracking X Tweets

Updated

You can easily use TUNE to track valid Tweets from X as conversions. This allows you to compensate partners for providing users who 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 X 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 and the “via” value. “Via” describes who provided the content that is being tweeted. You will most likely want to submit your company’s X 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 is called the loadConversionPixel() function, which displays the conversion pixel. You can also modify the size and layout of the X button now. For more information on customizing the look and functionality of the button, click here: https://dev.twitter.com/docs/tweet-button

Conversion Pixel

Create an offer in your TUNE platform 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 platform. If you have already loaded jQuery on your webpage, 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 ensure you have the doctype set properly. Learn about the IE issue here: https://dev.twitter.com/discussions/3102

 

Related articles