The clickthrough URL is simply the URL that should be loaded when a user click on your banner ad. There are a few ways to specify and handle clickthrough URLs within TweenUI. The simplest option is to set the clickthrough URL directly inside the editor (under File->Settings) while you’re building your banner. This way, the URL will be a hard-coded part of the banner when you later publish it.

When you publish a banner ad you will get a short snippet of code called ad tags or the embed script. This is the code snippet your share with parties who should traffic your ad, and it looks similar to this:

<script id="tui-spmn">
(function(t){t.spmn={
"cid":"46501524-b7b1-44ae-8342-9cdfcd0b9700",
"pid":"d96e410a-eb8a-47e8-9501-8ee8cae84c17",
"width":"500",
"height":"90"
}}(window.tweenui=window.tweenui||{}));</script>
<script src="https://s3-eu-west-1.amazonaws.com/display.tweenui.com/s.js" async></script>

Embedding the snippet above in a webpage results in:

In the example above, the URL “https://tweenui.com/this-url-was-hard-coded” was set as the clickthrough url in the ad editor under File->Settings. Many times however, more flexibility than that is needed.

You can configure the clickthrough URL directly in the ad tags by adding a new parameter called “link”. For instance, if you wanted the clickthrough URL for this banner ad to be http://tweenui.com/my-landing-page, this is how you would add the link parameter (don’t miss the trailing comma):

<script id="tui-spmn">
(function(t){t.spmn={
"link":"http://tweenui.com/my-landing-page",
"cid":"46501524-b7b1-44ae-8342-9cdfcd0b9700",
"pid":"d96e410a-eb8a-47e8-9501-8ee8cae84c17",
"width":"500",
"height":"90"
}}(window.tweenui=window.tweenui||{}));</script>
<script src="https://s3-eu-west-1.amazonaws.com/display.tweenui.com/s.js" async></script>

The snippet above gives this result:

You can also use the link parameter to insert click macros into the ad tags. Let’s say you have a publisher who has the following click macro: %%CLICK_URL%%. To support this macro, set the macro as the value of the link parameter in the ad tags:

<script id="tui-spmn">
(function(t){t.spmn={
"link":"%%CLICK_URL%%",
"cid":"46501524-b7b1-44ae-8342-9cdfcd0b9700",
"pid":"d96e410a-eb8a-47e8-9501-8ee8cae84c17",
"width":"500",
"height":"90"
}}(window.tweenui=window.tweenui||{}));</script>
<script src="https://s3-eu-west-1.amazonaws.com/display.tweenui.com/s.js" async></script>

Adding a link parameter to the ad tags will normally override any clickthrough URL that was hard coded in the banner. But some platforms use a slightly different setup and require that the final destination URL is provided by the banner and appended to the end of a clickthrough URL. For instance, some platforms will use a click macro to insert a clickthrough URL that may look similar to this:

http://ad-platform.com/banner-id/123/click?dest=

Here, it is required that the destination URL is appended at the end of the clickthrough URL. Adding a new parameter to the ad tags will help us with this use case.

This parameter is called append_ct and can only be used together with the link parameter. Adding the append_ct parameter will cause any originally hard coded clickthrough URL to be appended to the URL specified by the link parameter. This is how the ad tags will look:

<script id="tui-spmn">
(function(t){t.spmn={
"link":"http://tweenui.com/banner/123/click-counter?dest=",
"append_ct":1,
"cid":"46501524-b7b1-44ae-8342-9cdfcd0b9700",
"pid":"d96e410a-eb8a-47e8-9501-8ee8cae84c17",
"width":"500",
"height":"90"
}}(window.tweenui=window.tweenui||{}));</script>
<script src="https://s3-eu-west-1.amazonaws.com/display.tweenui.com/s.js" async></script>

And the result is below:

The clickthrough URL set in the TweenUI editor “https://tweenui.com/this-url-was-hard-coded” is now appended to the end of the URL specified by the link parameter “http://tweenui.com/banner/123/click-counter?dest=”.

Building responsive Html5 banner ads with TweenUI is easy. Start off by using our editor to create a banner ad and select “Download” or “Publish” from the File menu. If you selected “Download”, open the index.html file in a text editor and you will see the javascript code block used to display your banner. Here is an example of what it looks like:

<!-- TweenUI block start -->
<script id="tui-xxlo">
(function(t){t.xxlo={
"file":"tweenui/banner.html",
"width":"300",
"height":"300"
}}(window.tweenui=window.tweenui||{}));</script>
<script src="tweenui/tui.js" async></script>
<!-- end -->
These are the default settings and this code will produce a normal 300×300 banner. If you used our Cloud Publish feature, the embed script will look slightly different, but the instructions in this article still applies.

To make this banner responsive, all you have to do is add the text in red below:

<!-- TweenUI block start -->
<script id="tui-xxlo">
(function(t){t.xxlo={
"file":"tweenui/banner.html",
"width":"300",
"height":"300","scale":true
}}(window.tweenui=window.tweenui||{}));</script>
<script src="tweenui/tui.js" async></script>
<!-- end -->
This means that your banner will now scale to fill 100% of the available width. The banner proportions will be kept so the height will be a function of the width. Below is a simple example, try resizing the browser window to see the results!

In a content management system like WordPress, this is most usually the behaviour we want. The banner will scale to the full width of the column.

Sometimes however, you may want to set the maximum width of a banner and not allow it to fill all the available space. You can do this by wrapping the banner in a div with a max-width css property. For instance, if you want the banner to be responsive but never wider than 450 pixels, this is the code you would use:
<div style="max-width:450px">
<!-- TweenUI block start -->
<script id="tui-xxlo">
(function(t){t.xxlo={
"file":"tweenui/banner.html",
"width":"300",
"height":"300","scale":true
}}(window.tweenui=window.tweenui||{}));</script>
<script src="tweenui/tui.js" async></script>
<!-- end -->
</div>


And here is the result. Again, resize the browser window to see the effect.

1. In TweenUI, first click File -> Download for DoubleClick. A zip file containing all of your banner assets will be downloaded to your computer.
2. Login to your DCM account and in your campaign, click New > HTML5 banner. This can also be done on your advertiser-level Creatives tab.
3. Under Creative assets, click Add asset.
4. Select the .zip file that you downloaded from TweenUI in the first step.

You can find more information on how to upload HTML5 creatives into DCM in this Google support article: DCM HTML5 banner setup.

Instructions for DoubleClick for Publishers (DFP):
You can easily upload an HTML5 banner ad created with TweenUI into DoubleClick for Publishers (DFP). Just follow this step by step guide:

1. In TweenUI, first click File -> Download for DoubleClick. A zip file containing all of your banner assets will be downloaded to your computer.
2. Now, login to your DFP account and select the Delivery tab.
3. Click on Creatives in the left panel and click Add creatives.
4. Select the advertiser whose creative you’re adding and click “Continue”.
5. Select HTML5 from the list of creative types. Enter a name and click “Choose file” to upload the zip file that you downloaded from TweenUI in the first step.

If you have not added a click through URL in TweenUI (File -> Settings), you will now see a message asking you to fill out the clickTag variable. Enter the URL of your landing page.

You can find more information on how to upload HTML5 creatives into DFP in this Google support article: Traffic HTML5 creatives.

There’s also more general information about HTML5 and DFP in this article: HTML5 and DFP.

You can either connect your AdWords account and publish directly into your AdWords campaign, or you can download you banner as a zip file which can be imported into AdWords.

To upload directly into AdWords, press “Publish to AdWords” from the File menu. Then press the “Connect AdWords account” button, sign in with your Google AdWords account and press allow to grant TweenUI the necessary permissions. You can revoke the permissions at any time by reviewing connected apps in your Google account.

Next, select the campaign and ad group that you want to use, and fill out the display URL and landing page. You can use the refresh button if you’ve added or removed any campaigns. Press “Publish to AdWords”, and your banner will be available under the Ads tab in your AdWords account.

If you don’t want to connect your AdWords account, use the “Download for AdWords” option in the File menu. A zip file will be generated and downloaded to your computer.

To upload the file into Google AdWords™, login to AdWords and select an Ad group in your Adwords Google Display Network campaign. Create a new Image Ad and choose the upload option. Drag and drop or browse to the zip file that you downloaded from TweenUI.

You should now be able to see a preview of the ad.

You don’t have to set any click-through URL in TweenUI. The landing page (Final URL) and tracking is configured in AdWords.

Here’s a video that shows both options: