如何通过属性选择器从商品页面提取URL？基于Google Tag Manager实现Schema标记

一、调整触发器逻辑 #

别用Element Visibility触发器了，换成DOM Ready或者Window Loaded触发器更靠谱——毕竟要等目标图片元素完全加载出来才能提取URL。如果你的商品图是异步懒加载的，优先选Window Loaded；如果页面渲染完图片就存在，DOM Ready足够。
要是你必须限定只在商品页触发，就在触发器里加个页面条件：用CSS选择器匹配head[prefix~="product"]，确保标签只在符合条件的页面执行。

二、创建自定义变量提取图片URL #

新建一个自定义JavaScript变量（命名比如getProductImageURL），代码如下：

function() {
  const imgElement = document.querySelector('.X');
  // 要是图片用的是data-src这类懒加载属性，把src改成对应的属性名
  return imgElement ? imgElement.getAttribute('src') : '';
}

三、编写自定义HTML标签生成Meta标签 #

新建自定义HTML标签，填入以下代码：

<script>
  const imgUrl = {{getProductImageURL}};
  if (imgUrl) {
    const metaTag = document.createElement('meta');
    metaTag.setAttribute('itemprop', 'image');
    metaTag.setAttribute('content', imgUrl);
    document.head.appendChild(metaTag);
  }
</script>

把这个标签和之前配置好的触发器绑定在一起。

四、验证生效情况 #

发布GTM容器后，打开商品页右键检查元素，看head里有没有生成对应的<meta itemprop="image">标签；也可以用Google的Rich Results Test工具验证Schema标记是否正常识别。

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