How to insert a value from the form into a javascript on the Confirmation dialog?


#1

Hello everyone !

For almost two years now, i have been using Unbounce and i’m loving it so far.
As a web agency we are using Affilae.com for tracking what the traffic and leads my partners are doing. (Its efficient, simple, not expansive and french :slight_smile: ).

When i add a pixel onto the confirmation form dialog, Affilae requires that i include for each lead an unique value which could be anything from a series of number, an ID number or an email.

Until now i’ve used a mathematical calculation in the script to generate a unique value.

Here what a pixel looks like normaly:

<iframe src="https://lb.affilae.com/?key=5764002a665e8815378b96d2-57640000665e8815378b96d0&id={UNIQUE_ID}" frameborder="0" width="1" height="1"></iframe>

And here is what the script looks like:

<script>
$(function() {
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}

$( "body" ).append('<iframe src="https://lb.affilae.com/?key=5764002a665e8815378b96d2-57640000665e8815378b96d0&id=' + guid() +' " frameborder="0" width="1" height="1"></iframe>');
});
</script>

My current problem is that i regularly have duplicate on my landing pages (i don’t know really why, but the fact that when someone register to a form on unbounce, even with the confirmation dialogue appearing, the form is there in the back and i’m guessing people are unsure if the form worked the first time so they do it again just in case)

My question: How do i insert a value (email for exemple) from the form into a script placed on the confirmation dialog ?

thanks in advance !


#2

Me again !

I found the solution and i think it could be useful for other people.

This morning i though that what i needed was a feature like “dynamic text” but inside Javascript.
So i did a search on the community and found this thread (back when Dynamic text was not a proper feature in Unbounce) : Dynamic Text Replacement / Variable Text [Implemented]

On the second reply, @Carter give us a small Javascript allowing to do the Dynamic text.
So i though that i could use it and tweak it to insert the email from the form into my pixel, but this time inside a JS.
And it’s working ! :smile:

–> The only drawback is that you can’t use it with the “show confirmation page” on your form configuration, you have to choose either “Go to URL” or “open URL in lighbox” and to activate “append form data to URL”.
Which mean you’ll have to create a dedicated landing page for the confirmation page.

I have no background in JS / JQuery or any kind of language so maybe someone could still have a look to see if there is no error in it.

here is the code:

<script type="text/javascript">
var getUrlParams = function() {
var params = {}, hash;
var hashes = decodeURI(window.location.href).replace(/\+/g," ").slice(window.location.href.indexOf('?') + 1).split('&');
for (var i=0; i<hashes.length; i++) {
hash = hashes[i].split('=');
params[hash[0]] = hash[1];
}
return params;
};
jQuery(function() {
// This assumes you have a parameter in your URL called "email"
var email = getUrlParams()['email'];
if (email != undefined) {
$( "body" ).append('<iframe src="https://lb.affilae.com/?key=563895e5665e8881688b66dd-557edb46f3579d0e5b8b4567&id=' +(email)+' " frameborder="0" width="1" height="1"></iframe>');
}
});
</script>

The first part is the code from @Carter and then i added my own code for the pixel (see first post) with “email” being the field name for @ on my form.

So if you are looking for a similar script, just replace the script of you tracking pixel and change “email” by the url parameter of your choice.

I hope this can help if needed !


#3

Ah!! @julien_level!! I feel bad that this went unanswered, but it’s so awesome that you were able to answer your question right here in the community AND share your findings! That’s so rad!

There is so much good stuff here!

I love to hear that :blue_heart: :blue_heart:

:point_up: This is hard to believe! You seem to be finding your way around pretty well! :smiley:

I’m going to add this post into our Tips and Scripts category, should another community member need to find this information.

YOU ROCK!! Hope to hear more from you in the community! :wave:


#4

Thank you Jess !

I had fun trying to solve it.