Set Custom HTML Button as Conversion Goal


#1

I have Custom HTML on my page that creates a button. I would like a click on this button to be set as a conversion goal. How do I do this?


#2

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


#3

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).


#4

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.


#5

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…


#6

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


#7

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.


#8

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


#9

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


#10

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


#11

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!


Tracking conversions on an HTML button
#12

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


#13

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!


#14

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


#15

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.


#16

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


#17

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