Twitter Follow App

This document provides a simple and straightforward description of how to work in the repository (developers), and how the app works. There are some details to bear in mind about the project and what it's expected from the same. If any piece of code that may cause any problem is found, the same should be reported.

If you are encouraged to fix it, please submit a pull request with the changes.

Project Repository (Developers Only)

Note

For swf ads, it's necessary to use the swfobject.js library and the expressInstall.swf file in order to make it work. Those files are included in the utilities directory. Then you must add those files before closing the head tag in the html, e.g:

<!DOCTYPE html>
<html>
    <head>
        ...
        <script type="text/javascript" src="../utilities/swfobject/swfobject.js"></script>
        <script type="text/javascript">
            swfobject.embedSWF("300x250.swf", "hm-swf-object", "275", "228", "9.0.0", "../utilities/swfobject/expressInstall. swf");
        </script>
    </head>
    ...
</html>

For a more complete reference about this example, just take a look at one of the files in the hopper (campaign) directory.

Follow Button Tracking

There's not need to register an app through a developer account in order to implement a Twitter Web App, so to track followers (actions) through the follow button, we are going to use the event that will allow us to do such thing, in this case, we will use the twttr.events.bind() method, for more reference about it, just take a look at the official doc.

Our even will be follow and we will do the action as a listener through the function event, and there is where we will call our pixel in order to track everytime a user interacts through the button, of course we can do something more right there! The login validation is managed by twitter.

The clickUrl variable used inside the javascript is used to trigger a pixel image (1x1 - .jpg) when the clickUrl is invoked. That variable gets the ad server macro via url, where the ad server will replace its respective value. The pixel image must be triggered due to the same will alert the ad server that the banner is ready to track through an action, that validation is realized by the ad server at uploading the banner on it.

Note

The only one thing we must assure is the triggering of the pixel image, we can check it through the browser with the inspect element action.

In the same way (through the inspect element action) we can check if the pixel was triggered through the Twitter Even.

Click Tracking Macros

Purpose of click tracking macros

Click tracking macros are bits of code inserted into third party creative tags that enable the ad servers to track clicks. When we get an ad call, the ad servers redirects the call to a third party's ad server which serves the ad. When a user clicks on the ad, the third party ad server records the click. If there is a click tracking macro embedded in the ad tag, the third party knows to send notification of a click to our ad servers.

Automatic insertion of click tracking macros

Each third party ad server has its own set of instructions for appending a click tracking macro to the ad tag. Some ad servers require the macro to be appended before the URL with a comma separator. Others may designate a variable string within the URL to call for the macro. When you traffic a creative into the wizard, the wizard examines the tag and tries to automatically insert the click tracking macro. Automatic click tracking is supported for many third party tags. Ad server companies are constantly upgrading their tags, which may break the automation. The creative wizard's list of supported tags is updated to reflect any changes.

Unencoded and Encoded Click Tracking Macros

The third party ad server generally dictates whether it requires an unencoded or encoded macro. If the rest of the tag is unencoded, the click tracking macro probably needs to be unencoded, and likewise for encoded tags. URL encoding of characters such as “/” consists of a “%” sign followed by the two-digit hexadecimal equivalent of the character, such as “2F.”

Right Media

The RMX ad server uses two versions of the click tracking macro:

${CLICKURL} – regular, unencoded URL
${CLICKURLENC} – encoded URL

For this app, we are going to use an encoded click tracking macro, the same will be added at the end of the ad url.

${CLICKURLENC}

After doing the deploy, the url for being implemented in the ad server should be added as follows:

http://ad.static.harrenmedia.com/twitter-follow/[campaign_name]/[ad_size].html?clickUrl=${CLICKURLENC}

Appnexus

Like RMX ad server, APPNX uses two versions of the click tracking macro:

${CLICK_URL} – regular, unencoded URL
${CLICK_URL_ENC} – encoded URL

As the previous example, we are going to use an encoded click tracking macro for this ad server, and the same will be added at the end of the ad url.

${CLICK_URL_ENC}

After doing the deploy, the url for being implemented in the ad server should be added as follows:

http://ad.static.harrenmedia.com/twitter-follow/[campaign_name]/[ad_size].html?clickUrl=${CLICK_URL_ENC}

Final URL

Note:

The parameters [campaign_name] and [ad_size] mentioned above should be replaced.

The following is a real campaign, then as result the url will be:

RMX: http://ad.static.harrenmedia.com/twitter-follow/smart/300x250a.html?clickUrl=${CLICKURLENC}

APPNX: http://ad.static.harrenmedia.com/twitter-follow/smart/300x250a.html?clickUrl=${CLICK_URL_ENC}