jQuery - appending tracking to a link

Question

I have a recommendations section on our site - which is simply pulling the necessary info and making the links.

The issue I'm facing here is that, I want to add:

?crossSellFlag=true&adobeRecs=true

To each link clicked.

EDIT: I've found a sort of - solution by changing the anchor links to this: ~As found here

<a onclick="var s = s_gi(s_account);
                s.linkTrackVars='events,eVar21';
                s.linkTrackEvents='event16';
                s.events='event16';
                s.eVar21='';
                s.tl(this,'o','Product Detail Cross-Sell');" href="$entity1.pageUrl?crossSellFlag=true&adobeRecs=true">

however i did see in another template another way of doing this - i'm wondering if my way is inneficient or bad practice when comparing it to the below:

<div id="scrool" class="scroll-img">
      <ul>
        #set($count=1) 
          #foreach($e in $entities)  
            #if($e.id != "" && $count < $entities.size() && $count <=18) 
              <li>
                <a class="productBlock" onclick="var s = s_gi(s_account);
                s.linkTrackVars='events,eVar21';
                s.linkTrackEvents='event16';
                s.events='event16';
                s.eVar21='';
                s.tl(this,'o','Product Detail Cross-Sell');" href="$e.pageUrl?crossSellFlag=true&adobeRecs=true">
                  <img title="$e.name" alt="$e.name" src="$e.thumbnailUrl">
                  <h3>$e.name</h3>
                  <p>$$e.value</p>
                </a>
              </li>
            #set($count = $count + 1)
          #end 
        #end
      </ul>
    </div>

I've spent hours trying to figure this out alongside training in codeacademy.

Any help would be GREATLY appreciated. Please see below I pasted the whole section.

Thanks!

<style>
        .related-items{
            display:none;
        }
        .pdpRecs{
            text-align:center;
            margin:1.5em 0;
        }
        .pdpRecs .heading{
            font:bold 1.5em Arial;
        }
        .pdpRecs ul{
            display:block;
            width:100%;
        }
        .productImage{
            display:inline-block;
            width:22%;
            margin:1%;
            vertical-align:top;
        }
        .productImage img{
            border:1px solid #ddd;
            width:100%;
        }
        .productImage h3{
            font:bold 1em Arial;
            color:#444;
            margin:.2em;
        }
        .productImage p{
            font:1em Arial;
            color:#701111;
            margin:.2em;
        }
    </style>
    <div class="pdpRecs">
      <span class="heading">You May Also Like</span>
      <div class="scroll-prev"></div>
      <ul class="slidingPanel">
        <li class="productImage">
          <a href="$entity1.pageUrl">
            <img src="$entity1.thumbnailUrl" class="at-thumbnail"/>
            <h3>$entity1.name</h3>
            <p class="at-light">$entity1.value</p>
          </a>
        </li>
        <li class="productImage">
          <a href="$entity2.pageUrl">
            <img src="$entity2.thumbnailUrl" class="at-thumbnail"/>
            <h3>$entity2.name</h3>
            <p class="at-light">$entity2.value</p>
          </a>
        </li>
        <li class="productImage">
          <a href="$entity3.pageUrl">
            <img src="$entity3.thumbnailUrl" class="at-thumbnail"/>
            <h3>$entity3.name</h3>
            <p class="at-light">$entity3.value</p>
          </a>
        </li>
        <li class="productImage">
          <a href="$entity4.pageUrl">
            <img src="$entity4.thumbnailUrl" class="at-thumbnail"/>
            <h3>$entity4.name</h3>
            <p class="at-light">$entity4.value</p>
          </a>
        </li>
      </ul>
      <div class="scroll-next"></div>
    </div>




    <script type="text/javascript">
      jQuery(function(){
        jQuery(".productImage h3").each(function(){
          if (jQuery(this).html()==""){
            jQuery(this).parent().parent().remove();
          } else {
            jQuery(this).parent().children("p").prepend("$");
          }
        });
        jQuery(".productImage a").each(function() {
          link = jQuery(this).attr("href");


          tdot = link.search("http://t.kirklands.com");
          mdot = link.search("http://m.kirklands.com");
          wwwdot = link.search("http://www.kirklands.com");
          if (tdot==0){
            mod = link.replace("http://t.kirklands.com", "");
            jQuery(this).attr("href", mod);
          } else if (mdot==0) {
            mod = link.replace("http://m.kirklands.com", "");
            jQuery(this).attr("href", mod);
          }
        });
      });
    </script>

Answer 1

You could write a JS function that appends those URL params on click. If you wanted it to work on every link with a class of productBlock you could do something like this:

$(function() {
  $('.productBlock').on('click', function(e) {
    e.preventDefault();
    var link = $(this).attr('href');
    s = s_gi(s_account);
    s.linkTrackVars = 'events,eVar21';
    s.linkTrackEvents = 'event16';
    s.events = 'event16';
    s.eVar21 = '';
    s.tl(this, 'o', 'Product Detail Cross-Sell');

    window.location.href = link + '?crossSellFlag=true&adobeRecs=true';
    //console.log(link + '?crossSellFlag=true&adobeRecs=true');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<a class="productBlock" href="http://www.google.com">Click me!</a>
<br/>
<a class="productBlock" href="http://www.bing.com">Click me too!</a>