Google 跟踪代码管理器 - CSS 选择器挑战

Question

我正在尝试获取源代码中 link 的 URL。挑战在于 URL 隐藏在图像后面，因此只能让我获取图像 - url。

我一直在想办法通过在触发系统中使用新的 CSS 选择器来解决这个问题，并且还制作了一个 DOM 变量，它应该得到 URL 单击图像时。也可以有多个下载。

这是我想要实现的目标的示例：

<div> 
 <div class="download">
  <a href="example.com/The-URL-I-Want-to-get-if-top-image-is-clicked.pdf" target="_blank">
   <img src="some-download-image.png"/></a>
 <div class="download">
  <a href="example.com/Another-URL-I-Want-to-get-if-middle-image-is-clicked.pdf" target="_blank">
   <img src="some-download-image.png"/></a>
 <div class="download">
  <a href="example.com/Last-URL-I-Want-to-get-if-bottom-image-is-clicked.pdf" target="_blank">
   <img src="some-download-image.png"/></a>
 </div>
</div>

这段代码上下有很多代码，但是有了选择器应该很容易得到我想要的信息。只是我不知道。

如果有人遇到这堵墙并解决了它，我真的很想知道如何解决。 :)

Answer 1

这是一种可能的解决方案。因此，据我了解，您希望在单击 "download" 图像时获取锚元素的 href 属性。

需要创建自定义 Javascript 变量，以便您可以操作点击元素对象：

function(){
   var ec = {{Click Element}};
   var href = $(ec).closest('a').attr('href');
   return href;
}

因此您需要尽职调查并添加错误检查和内容，但基本上这应该 return 给您 href，然后您需要解析字符串以提取部分你需要的。

Google 跟踪代码管理器 - CSS 选择器挑战

Google Tag Manager - CSS selector challenge

html

javascript

css-selectors

google-tag-manager