jQuery - 将追踪追加到链接

时间:2015-11-09 18:19:27

标签: jquery jquery-ui

我在我们的网站上有一个建议部分 - 它只是提取必要的信息并建立链接。

我面临的问题是,我想补充一下:

  

crossSellFlag =真安培; adobeRecs =真

点击每个链接。

编辑:我发现了一种解决办法 - 将锚链接更改为: 〜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">

然而我确实在另一个模板中看到了另一种方式 - 我想知道在将它与下面的方法进行比较时,我的方式是不合理的还是不好的做法:

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

我花了好几个小时试图在codeacademy的训练中解决这个问题。

任何帮助都会非常感激。 请看下面我粘贴了整个部分。

谢谢!

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

1 个答案:

答案 0 :(得分:1)

您可以编写一个JS函数,在点击时附加这些URL参数。如果您希望它可以在productBlock类的每个链接上工作,您可以执行以下操作:

&#13;
&#13;
$(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');
  });
});
&#13;
<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>
&#13;
&#13;
&#13;