Hello Hunter

Unfortunately there is currently no way to track conversions via embedded components. We will be offering a way to do this in the not too distant future however.

Can I ask what you are hoping to achieve by using the embedded button? This may help us to identify potential work-arounds.

JM

I have the same request. I have an embedded HTML button provided by Guestlist (http://www.guestlistapp.com/) that pops up a light box for event registration. Would be great to indicate that button as a conversion goal (although the real conversion is registering afterward, the click of the button would be a positive sign).

You can set a link within custom html to track as a conversion. In the [ tag you need to just add the conversion identifier: clkg/

A link that originally looked like this href="](true)http://www.myconversion.com"

Would look like this href=“clkg/http://www.myconversion.com”

Adding the clkg/ causes clicks to track as conversions.

I hope this is helpful.

Hey Zach - you’re right, prepending clkg should work the same as another other links that you’ve marked as a conversion goal. In the future when we allow for reporting individually on multiple conversion goals, this method may no longer apply.

I’d also suggest checkout out our external tracking script that lets you track conversions on a 3rd party page: http://support.unbounce.com/entries/3…

Hi Carter,

What if your HTML button calls a script instead of a link? Is there a way to prepend /clkg to these types of buttons?

Thanks,

Glen

If your button is triggering a javascript event instead of a regular link, you could try using ajax to send a request to “clkg” in the background before (or after) the script that your button is triggering executes. Does that make sense? jQuery makes this pretty easy. Somewhere in the script that your button calls, you should be able to include this:

$.get("clkg/http/");

…which will send a call back to our server triggering a conversion for the page.

Thanks Carter, but unfortunately I don’t have access to the script being triggered. It lives on WebinarJam’s servers. Here is the HTML behind the button:

`RESERVE MY SEAT

Would the solution be as simple as inserting this before the other 3 script tags?:

<script type="text/javascript">

  $.get("clkg/http/");

</script>

Thanks for your help!

Glenn

Ahh I see. Try adding this right after the </button> code (before the first script) and see if that works.

<script type="text/javascript">$(function(){$("button[title='regpopbox_33086_dca1e65fbb']").click(function(){$.get("clkg/http/");});});</script>

Carter

Sorry Carter, in my last post I forgot to wrap my code so it didn’t show up…here’s what I added at the end of the 3 scripts:

<script type="text/javascript">

  $.get("clkg/http/");

</script>

I tested it and it adds a conversion when the button is clicked. Is your method better or should I just stick to this?

Thanks,

Glenn

Hey Glenn, on its own that will trigger a conversion for every visitor to the page, regardless of whether they click on the button. The script I included ensures the conversion is only triggered if the button is clicked. Let me know if it works!

Hey Carter,

The script I provided is in a custom HTML block that include the button:

<button type="button" class="btn" title="regpopbox_33086_dca1e65fbb"><span>RESERVE MY SEAT</span></button>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" language="javascript" type="text/javascript"></script>

<script src="//app.webinarjam.net/assets/js/porthole.min.js" language="javascript" type="text/javascript" async></script>

<script src="//app.webinarjam.net/register.evergreen.extra.js" language="javascript" type="text/javascript" async></script>

<script type="text/javascript">

  $.get("clkg/http/");

</script>

Doesn’t it only fire when the button is clicked by default? I’m happy to use your code, just trying to understand the difference.

Thanks!

Glenn

Ahh I see where you’re coming from. The custom HTML block doesn’t actually do anything to link scripts and elements within it to each other. If your page is published and you have Chrome, try opening an “Incognito Mode” browser window (so that any previously set cookies aren’t enabled) and you should be able to confirm that your conversion count goes up by 1 even without clicking the button. The script I added just ensures that it finds the button with the “regpopbox_33086_dca1e65fbb” title, and attaches the $.get("clkg/http/"); script to it when that button is clicked. Hope that helps clarify things a bit!

You’re absolutely right! It was counting conversions when I loaded the page (in incognito mode).

I changed the code to what you had suggested and this works perfectly. Thanks for your help, Carter!

Any ideas on how to solve my latest issue? "Feedback Wanted] Convertables

Awesome glad to hear it works! And I’m pretty sure your request for a custom close button in that other thread is a feature on its way.

Glad to hear you’re working on a custom close button!

I am trying to add this to a Shopify button embed. Does anyone any experience with this?

I’m trying to set up conversion tracking within my custom HTML using the clkg process you mentioned @Zach_Randall

…href=“clkg/https://myurlhere.com” target="_blank"> but I keep getting The requested URL was not found on this server. Any idea on how to solve this?

When I click through the redirect it populates my Unbounce URL as the base, then /clkg/https://myurlhere.com which prompts the error vs simply go to https://myurlhere.com

I am having the same issue. Did you find a solution?

I think they need more clear documentation around this…

Unfortunately no. What I did instead was use a Button in place of the custom HTML redirect.

Ok, just found the solution, if someone need it… Thanks to this page : https://gist.github.com/johnnyopao/b1990f421eb1ef2a48d9

Put a code snippet, like jquery or vanilla js that triggered when the button is clicked. And before the action (like redirect the user to the Stripe page), add this line :

$('body').append('<iframe src="clkg/http/unbouncepages.com/blankpage/" style="display: none"></iframe>');

If you need an example :

$('.my-button-class').on('click', function(){

    $('body').append('<iframe src="clkg/http/unbouncepages.com/blankpage/" style="display: none"></iframe>');

    // then do whatever you want

})

It worked for me, hope so for you.

Hey Julien—I tried your solution but getting an error since my landing page it on https. I tried just modifying clkg/http/ to clkg/https/ but it doesn’t seem to work. Any ideas?

Hi guys,

Not sure if this is the right page, but I would need to install a conversion pixel of LinkedIn on my download button. How can I do this?

Hey Carter, I know this is an old thread, but I tried implementing a version of this on my button clicks with the code below:

<a class="button call-button" id="callBtn1" href="tel:+18445151249" style="...">
    Call now: (844) 515-1249
</a>

<script type="text/javascript">
$(function() {
    $(".call-button").click(function(e) {
        e.preventDefault();
        $.get("clkg/http/");
        setTimeout(function() {
            window.location.href = 'tel:' + phoneNumber;
        }, 100);
    });
});
</script>

But it’s showing a 404 error in the console since it’s basically fetching amyunbounceurl]/clkg/http as the url.

Would this approach that you suggest still apply for phone call buttons, or should is this something that should be handled with Google Tag Manager?

Thanks!