Unbounce Integration

How to integrate AnyTrack with Unbounce landing page builder in order to track affiliate links and optin forms.

PreviousClickFunnels Integration NextHow AnyTrack works with link trackers plugins

Last updated 4 years ago

Unbounce Integration

How to integrate AnyTrack with Unbounce landing page builder in order to track affiliate links and optin forms.

Unbounce is a popular landing page builder used by digital marketers.

AnyTrack integrates seamlessly with Unbounce so you can track your landing page engagements in a matter of minutes.

To get started you will need:

Unbounce landing page settings

Create or edit your landing page
Open the page JS settings
Copy/paste the AnyTrack tracking code in the <head> placement of the page.

Form settings

By default, AnyTrack will AutoTrack any form submissions. However, if you would like to send tracking info to your CRM or email marketing software, you will need to add a hidden field to your form.

Edit the optin form
Add a hidden field -
1. Field name: any field name will work but it should match your Email marketing software requirements
2. Default value: The default field value should be set as {click_id} (see illustration below)

On page load, AnyTrack will AutoTag the form by substituting {click_id} with an actual value.

Mailchimp integration

When you integrate your Mailchimp account in Unbounce, you can then tie the form submission to your list, and run automation within Mailchimp.

If you haven't created a custom field for the AnyTrack click_id, you can do so directly within Unbounce in the field mapping screen.

You can name the fields as you see fit, but we recommend using the same name as below so that you can take advantage of some automations.

Mailchimp embed form

If you add the mailchimp embed form directly into your Unbounce page, you must add manually the hidden field into the embed code.

Line to be added to the embed form:

<input type="hidden" name="CLICK_ID" value="" data-at-value="{click_id}">

Example of a complete embed form code (don't use this embed form as it belongs to our internal account and id's have been altered.

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://anytrack.us10.list-manage.com/subscribe/post?u=xxxxxxx&amp;id=xxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<h2>Subscribe</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  /* Add the hidden field code, where the name="CLICK_ID" is the actual merge field name,
  not the label. The field MUST exist in your list merge fields.
  <input type="hidden" name="CLICK_ID" value="" data-at-value="{click_id}">
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a63cc4793f68f437xxxxxxxx773a6a77d_37544c5a66" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';fnames[6]='CLICK_ID';ftypes[6]='text';fnames[7]='UBPAGEID';ftypes[7]='text';fnames[8]='UBVARIANT';ftypes[8]='text';fnames[9]='UBDATE';ftypes[9]='date';fnames[10]='MMERGE10';ftypes[10]='number';fnames[11]='IP_ADDRESS';ftypes[11]='text';fnames[12]='PAGE_URL';ftypes[12]='url';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

Link settings

By default, AnyTrack will AutoTag and AutoTrack affiliate links from affiliate networks integrated in AnyTrack.

In the illustration below, you can see ?sid=YHgyd9JQncnx8LOx58TwTd parameter which is the query string used by CJ Affiliates to track conversions.

Link optional settings

Target: Same / open new tab or window.
Goal Settings: whether you want to use unbounce to track clicks as "conversions"

Unbounce editor does not give the ability to edit the link attributes on buttons elements. However, if you want to add link attributes on text links, you can.

Update your text links

That's it, your Unbounce page is now fully tracked and ready to for any type of traffic.

Special cases:

Since Unbounce doesn't let you add standard link attributes to buttons or other html elements, you can use the CSS settings instead.

The CSS method follows the link attribute data-tracking-group but is shorter tgid-{affiliate_network}

CSS Code Examples

Hasoffers

tgid-hasoffers

Impact

tgid-impact

Illustration in Unbounce

Click on the button you want to edit

PreviousClickFunnels Integration NextHow AnyTrack works with link trackers plugins

Last updated 4 years ago