JQuery to dynamically change a link inside a button?

**Tara_SumOfUs** · **Tara_SumOfUs** 12-03-15

I am testing a button that will let a user share a link via WhatsApp. The link will lead their friends back to the specific campaign the user shared. I have a button that works, but right now I have to set the URL manually for each page. As an example, here is my button:

<a href="whatsapp://send?text=http://action.sum.org/a/sample-campaign/?sub=whatsapp" style="margin-top: 15px;" onclick="console.log('whatsapp');_gaq.push(['_trackEvent', 'Post-action', 'Share petition - WhatsApp button');">Share on WhatsApp</a>

I need to be able to dynamically change that 'sample-campaign' inside the link to the actual name of campaign the user is sharing. Every campaign page includes a data- attribute in the <body> with the campaign name, for example: <body data-action="sample-campaign">

I think this should be relatively simple (right?) but I have been fiddling with the JQuery and can't get it quite right. Any advice would be greatly appreciated! Thank you!

**robertchan** · **robertchan** 12-03-15

Try something like this:

var currentParam = SETYOURCURRENTPARAMETER HERE;

var newParam = SETTHISEQUALTOYOURBODYDATAACTION

var newLink = location.href.replace(currentParam, newParam);

Robert Chan

bw · bw 12-04-15

Tara,
We can use jQuery's each() method to loop through links for instances of 'sample-campaign' and replace that string with the value of the data-action attribute.

Based on the provided code, the following should do the trick. Note - the 'evaluate' comments are important because of the way variation code is executed.

/*  _optimizely_evaluate=force  */
$("a").each(function() {
  var campaign_name = $("body").attr('data-action'); // Get user's campaign from data-* attribute
  $(this).attr('href',$(this).attr('href').replace('sample-campaign',campaign_name)); // .replace('string to replace','new string or variable name')
});
/*  _optimizely_evaluate=safe  */

I've created the following JSFiddle so that you can see this in action. Clicking the link below should present an alert of the href value where 'sample-campaign' has been replaced with 'foo'.

http://jsfiddle.net/pLemm2c1/

**JDahlinANF** · **JDahlinANF** 12-04-15

BW's response should do the trick.

A couple of suggestions though, if you are able...

1- add a unique class or id to the button so that the JS doesn't have to loop through every anchor on your page.

2-If you are testing _adding_ the link (it is not part of the web-server's HTML response), your code can be even more efficient by simply creating the button with all the necessary information and inserting the button into the proper location. The code in the script section is what you would place into your Variation's code - you'd need to alter the selector used (and probably the method too... this is just an example) to insert the link into the page at the correct location:

<body data-action="sample-campaign">

<div class="content-wrap">
	<!-- whatsappLink goes here -->
</div>

<script type="text/javascript">
if ($('body').attr('data-action') != "undefined") {
    var whatsappLink = '<a href="whatsapp://send?text=http://action.sum.org/a/' + $('body').attr('data-action') + '/?sub=whatsapp" style="margin-top: 15px;" onclick="console.log(\'whatsapp\');_gaq.push([\'_trackEvent\', \'Post-action\', \'Share petition - WhatsApp button\');">Share on WhatsApp</a>';
    $(whatsappLink).appendTo($('.content-wrap'));
}
</script>

**Tara_SumOfUs** · **Tara_SumOfUs** 12-04-15

Thank you! This seems like exactly what I want, since I am adding the link to the variation, not replacing it. But I'm not sure how to deal with the <script> within Oprimizely ... can you explain? Pasting that script into the code editor just returns errors ... it clearly just wants JQuery and doen't like the script tag at all. Do I need to have it in an external file, or is there a place in Optimizely I could paste that part? I'd like to use that if statement and the variable assigment, but I don't see how. I watched the Optimizely video, but am stil unclear. Thanks for your help, and sorry for the newbie questions!

**JDahlinANF** · **JDahlinANF** 12-04-15

@Tara_SumOfUs

The code above just puts it all into context of an entire HTML page.

Only the code *inside* the script block goes into the Variation's code editor (accessed by clicking the blue <edit code> link in the bottom right corner of your experiment. The only part you need is this (with appropriately modified selectors, of course):

if ($('body').attr('data-action') != "undefined") {
    var whatsappLink = '<a href="whatsapp://send?text=http://action.sum.org/a/' + $('body').attr('data-action') + '/?sub=whatsapp" style="margin-top: 15px;" onclick="console.log(\'whatsapp\');_gaq.push([\'_trackEvent\', \'Post-action\', \'Share petition - WhatsApp button\');">Share on WhatsApp</a>';
    $(whatsappLink).appendTo($('.content-wrap'));
}

JQuery to dynamically change a link inside a button?

JQuery to dynamically change a link inside a button?

Re: JQuery to dynamically change a link inside a button?

Re: JQuery to dynamically change a link inside a button?

Re: JQuery to dynamically change a link inside a button?

Re: JQuery to dynamically change a link inside a button?

Re: JQuery to dynamically change a link inside a button?