Changing URL string variable for only one link

Question

We add link tracking in our outbound links in the URL strings, which is based on a global variable that's declared on the page, but need the ability to modify only one of the links to read a different value. For example, in the sample below, all links for Ask, Bing, Duck Duck Go, and Yahoo, should be appended with the value "webcampaign", such as this:

http://www.ask.com/?group=&placement=webcampaign
http://www.bing.com/?group=&placement=webcampaign
http://www.duckduckgo.com/?group=&placement=webcampaign
http://www.yahoo.com/?group=&placement=webcampaign

However, we need Google to read like this:

http://www.google.com/?group=&placement=defLink

Here's the challenge. How can I modify the JavaScript so that the Google link reads differently than the rest of the links?

Here's a simple example where all links would have the same URL string appendage:

<html>
<head>
<title>Dynamic Link Test</title>
<script>
var placement = "webcampaign";
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="globalscripts_plain.js"></script>
</head>
<body>
    <p><a href="http://www.ask.com">Ask</a></p>
    <p><a href="http://www.bing.com">Bing</a></p>
    <p><a href="http://www.duckduckgo.com">Duck Duck Go</a>
    <p><a href="http://www.google.com" id="defLink">Google</a></p>
    <p><a href="http://www.yahoo.com">Yahoo!</a></p>
</body>
</html>

Here's the script that appends each link with the placement variable, which is declared at the top of the markup:

(function($, undefined) {
var App = (window.App || (window.App = {}));
$.extend(App,{
    getParameterByName : function (name) {},
});
$(function() {
    $('a[href^="http"]').each(function() {
        var $a = $(this),
            q = $a.attr('href') ? $a.attr('href').indexOf('?') : -1,
            contents = $a.html();
        if (q == -1) {
            $a.attr('href', $a.attr('href') + '?group=' + '&placement=' + placement);
        } else {
            $a.attr('href', $a.attr('href') + '&group=' + '&placement=' + placement);
        }
    });
});
})(window.jQuery);

JSFiddle link: https://jsfiddle.net/Codewalker/v92L8pbw/1/

Why on Earth would you do all that jQuery to make the links different anyways. Just change them in the HTML. If you must use jQuery just use a RegExp on the .attr('href'). — StackSlave
– StackSlave, Commented Jan 31, 2017 at 23:46

charlietfl · Accepted Answer · 2017-02-01 00:42:31Z

2

Can simplify this a bit and use anchor tag properties like search to see if query params already exist and use attr(function) which exposes the existing href value

var placement = "webcampaign";    

$('a[href^="http"]').attr('href', function(_, oldHref) {
  var placementVal = oldHref.indexOf('google.com') > -1 ? 'defLink' : placement;
  var  newQuery = this.search ? '&' : '?';
  newQuery += 'group=&placement=' + placementVal;
  return oldHref + newQuery;
})

DEMO

edited Feb 1, 2017 at 0:42

answered Feb 1, 2017 at 0:24

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pineda · Accepted Answer · 2017-02-01 00:01:27Z

Since this code is inherited, and seems to be a one off fix:

Notice that the google <a> tag has an id attribute of "defLink". You can use that to target elements in the .each method call.

Check when the ID of an <a> tag is equal to "defLink" an if statement or in a ternary expression, then you can change the value that is appended as follows:

$(function() {
  $('a[href^="http"]').each(function() {
    var $a = $(this),
        q = $a.attr('href') ? $a.attr('href').indexOf('?') : -1,
        contents = $a.html(),
   // the next line overwrites the global value 
   // of placement if ID is defLink
        placement = ($a.attr('id') === "defLink") ? "defLink":placement;
    if (q == -1) {
      $a.attr('href', $a.attr('href') + '?group=' + '&placement=' + placement);
    } else {
      $a.attr('href', $a.attr('href') + '&group=' + '&placement=' + placement);
    }
  });
});

Collectives™ on Stack Overflow

Changing URL string variable for only one link

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related