Allow dynamic parameters in CTA URL

Migrated from legacy feedback forum with 27 votes.

 

Sometimes I want to point a call-to-action to a non-Hubspot page as the landing experience. It would be great to be able to pass dynamic parameters in the CTA link (e.g., email address, campaign, source) so that I can track at the destination page.

HubSpot updates
5 Replies
arinker
Top Contributor

That would be really a nice feature to drive campaign efficiency!

 

I have put together a quick example to show a typical use case (the link url's should be md5 hashed to avoid switching through browser url input by smart web surfers):

Bildschirmfoto 2017-07-28 um 10.23.25.png

umair
Regular Contributor

I am trying to create dynamic CTAs which will change based on the form submitted. I have a hidden field in each form which will be used in the link with the email sent, is there any progress regarding such a CTA button?

HelenRoss
Regular Contributor

10/10 do want!

umair
Regular Contributor

Please add this!

ronkinkade
Regular Contributor

I've had a need for this solution as well and wanted to share my workarounds since Hubspot CTAs can be problematic.

 

My specific need was to capture URL parameters used in Google Ads when visitors hit a sub-domain or alternate domain (sub.mysite.com or alternate.com) and then read those parameters when visitors move to our main site (mysite.com). I won't get into the logic for the domain strategy, but for us, account creation occurs on our main site and that's ultimately what needs to read these parameters.

 

Prior to introducing alternate.com which is more of a campaign/strategic decision, we simply used cookies to write/read the parameters without issue. We still use this method on sub.mysite.com and mysite.com today. Cookies don't work cross-domain though, which is why we use the solution below for the alternate.com domain.

 

Appending URL parameters

On all landing pages for alternate.com we fire this script. We do this through Google Tag Manager, but you could also add to the <head> in settings for the specific domain in Hubspot. This script captures the URL parameters and appends them to any link on the page. This works for all links EXCEPT Hubspot CTAs which contain redirect code (scroll down).

 

<script type="text/javascript">
$(document).ready(function() {
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1);
    var links = $('a');
    links.each(function(){
    var curLink=$(this);
    var href = curLink.attr('href');
    var newhref = href +'?'+ hashes; 
    curLink.attr('href',newhref);
    });
});
</script>

Most of our landing pages only use one primary CTA, but these links redirect for tracking/performance purposes and this nulls the script above. So you have a few choices, custom code your CTA button as code and not a Hubspot CTA - or remove the redirect code.  Here's an example of how our CTA renders on the webpage.

 

 

<p><!--HubSpot Call-to-Action Code -->
<span class="hs-cta-wrapper" id="hs-cta-wrapper-f7c69066-f7f8-4d56-a6a9-08ccd992e59a">
<span class="hs-cta-node hs-cta-f7c69066-f7f8-4d56-a6a9-08ccd992e59a" id="hs-cta-f7c69066-f7f8-4d56-a6a9-08ccd992e59a" style="visibility: visible;" data-hs-drop="true">
<a id="cta_button_2513604_b1f0504e-7ff9-44c5-955f-6d63d74e104f" class="cta_button bg-red" href="https://www.call-em-all.com/cs/c/?cta_guid=b1f0504e-7ff9-44c5-955f-6d63d74e104f&amp;placement_guid=f7c69066-f7f8-4d56-a6a9-08ccd992e59a&amp;portal_id=2513604&amp;canon=https%3A%2F%2Fwww.text-em-all.com%2Flp%2Fmass-text-messaging&amp;redirect_url=APefjpGdHQNfXFJE_GNGdwC_KXXeTmgLft6hHGyxppQb_LSzCyK_VXZpPW6YvAziEDLQvh0mlWpq9Bn5-jf0UPH4XgE_U6w3IMNvfjkOSC7YvhAyQy2oAIde-59Tk0KpINWutLI7a1UwimS4PKcHTtTgjAzRNDDRDSU0mnptE7euZkdAh_4tgg3E_VGVls7-3335W3igTQ-IlBssJdHWuzDNo0aGnLMjXI2L4oa0gvROse0F7SkPRtNkwrgIWVaxvPM6TIMFTpSpBOaAvqwgXsIZ100rtiGyjg&amp;click=0801246e-df19-41b1-a464-30b90b8b4aac&amp;hsutk=fc7d2ac6c580448d6dc46f164f64300a&amp;signature=AAH58kEpYbIrRnoIF2om2XylPJWi8mkcJw&amp;pageId=18228192330&amp;__hstc=174698301.fc7d2ac6c580448d6dc46f164f64300a.1572802224734.1572878598577.1572884903795.5&amp;__hssc=174698301.4.1572884903795&amp;__hsfp=2500142339&amp;contentType=landing-page&amp;_ga=2.175406369.247132374.1572802224-1994650696.1572802224&amp;_gac=1.207808166.1572884947.EAIaIQobChMIgN2T0MjO5QIVCr3ACh3WEgRQEAAYAiAAEgLzyvD_BwE" style="" cta_dest_link="https://www.call-em-all.com/free-trial" title="Get started for free today">Get started for free today</a>
</span>
<script charset="utf-8" src="/hs/cta/cta/current.js"></script>
<script type="text/javascript"> hbspt.cta._relativeUrls=true;hbspt.cta.load(2513604, 'f7c69066-f7f8-4d56-a6a9-08ccd992e59a', {}); </script></span><!-- end HubSpot Call-to-Action Code --></p>

I simply removed the part in red and replaced with the link I wanted;

<p><!--HubSpot Call-to-Action Code --> 
<span class="hs-cta-wrapper" id="hs-cta-wrapper-f7c69066-f7f8-4d56-a6a9-08ccd992e59a">
<span class="hs-cta-node hs-cta-f7c69066-f7f8-4d56-a6a9-08ccd992e59a" id="hs-cta-f7c69066-f7f8-4d56-a6a9-08ccd992e59a" style="visibility: visible;" data-hs-drop="true">
<a id="cta_button_2513604_b1f0504e-7ff9-44c5-955f-6d63d74e104f" class="cta_button bg-red" href="https://www.call-em-all.com/free-trial" title="Get started for free today" cta_dest_link="https://www.call-em-all.com/free-trial">Get started for free today</a></span> <script src="/hs/cta/cta/current.js" charset="utf-8"></script> <script type="text/javascript"> hbspt.cta._relativeUrls=true;hbspt.cta.load(2513604, 'f7c69066-f7f8-4d56-a6a9-08ccd992e59a', {}); </script> </span> <!-- end HubSpot Call-to-Action Code --></p>

With this change, the CTA doesn't redirect and the script to append URL parameters works correctly.


I'm likely not getting the proper analytics on the CTA, but that has minimal value for me and certainly less than that of capturing the URL parameters in our system.