如何在Tag Manager中提取图片文件名作为变量并传递至Google Analytics

问题1：是否可以通过CSS Selector选中img标签创建DOM Element变量实现需求？ #

可以，但存在适用限制：

• 若你仅需要提取页面固定位置的单张图片名，直接用CSS选择器（比如.picture-loading.c-card__park img）创建DOM Element变量，取src属性即可实现
• 若你页面有大量图片、存在动态加载的新图片，且需要对应交互触发的具体图片（比如点击某张图就上报对应名称），纯DOM Element变量无法自动匹配到触发事件对应的图片，搭配你已配置的Auto-Event变量精准度更高，且动态加载的新图片触发事件时也能正常识别，不需要额外配置同步逻辑。

问题2：移除文件名后缀的实现方案 #

你现有的自定义JS变量可以直接优化，同时还能兼容处理src附带的查询参数（比如原链接里的?width=430&height=380），最终提取到不带后缀的文件名，代码如下：

function(){
  var url = {{Click URL}};
  // 先移除链接后的查询参数和锚点，避免参数影响提取结果
  var urlWithoutQuery = url.split('?')[0].split('#')[0];
  // 提取完整文件名（带后缀）
  var filename = urlWithoutQuery.substring(urlWithoutQuery.lastIndexOf('/')+1);
  // 移除最后一个.后的后缀，兼容文件名含多个.的特殊场景
  var filenameWithoutExt = filename.lastIndexOf('.') !== -1 
    ? filename.slice(0, filename.lastIndexOf('.')) 
    : filename;
  return filenameWithoutExt;
}

如果你的文件名确定不会包含多个.，也可以用简化版本：

function(){
  var url = {{Click URL}};
  var filename = url.substring(url.lastIndexOf('/')+1).split('?')[0];
  return filename.split('.')[0];
}

内容的提问来源于stack exchange，提问作者DrPaulVella