请求：前端404图片触发GTM dataLayer事件的通用代码方案

Got it, let's tackle this problem head-on. The key here is to catch both already-loaded broken images (since some might have failed before your script runs) and dynamically added images that break later. Here are two solid solutions—one with vanilla JavaScript, another with jQuery—to cover all bases:

Vanilla JavaScript Solution #

First, create a reusable function to handle the broken image logic and push the required data to GTM's dataLayer:

function handleBrokenImage(img) {
  // Initialize dataLayer if it doesn't exist
  window.dataLayer = window.dataLayer || [];
  
  // Set the "img broken" value in dataLayer
  dataLayer.push({ 'imgStatus': 'img broken' });
  
  // Trigger the specified GTM event
  dataLayer.push({
    'event': 'broken_img',
    'eventCategory': '404',
    'eventAction': 'Broken Img',
    'eventLabel': document.location.pathname,
    'brokenImageUrl': img.src // Optional: Add this to track which image failed
  });
}

Next, process existing images on the page (including those that failed before your script loaded):

// Wait for the DOM to be fully loaded before checking images
document.addEventListener('DOMContentLoaded', function() {
  // Check all existing images for pre-loaded failures
  document.querySelectorAll('img').forEach(img => {
    // A broken image will be complete but have no natural width
    if (img.complete && img.naturalWidth === 0) {
      handleBrokenImage(img);
    }
    // Bind error event to catch any future failures for these images
    img.addEventListener('error', () => handleBrokenImage(img));
  });

  // Listen for dynamically added images using event capturing (error events don't bubble)
  document.addEventListener('error', function(e) {
    const target = e.target;
    if (target.tagName === 'IMG') {
      handleBrokenImage(target);
    }
  }, true);
});

jQuery Solution #

If you're already using jQuery, this concise version works just as well:

function handleBrokenImage($img) {
  window.dataLayer = window.dataLayer || [];
  
  dataLayer.push({ 'imgStatus': 'img broken' });
  
  dataLayer.push({
    'event': 'broken_img',
    'eventCategory': '404',
    'eventAction': 'Broken Img',
    'eventLabel': document.location.pathname,
    'brokenImageUrl': $img.attr('src') // Optional: Track the failed image URL
  });
}

$(document).ready(function() {
  // Check pre-loaded broken images
  $('img').each(function() {
    const $this = $(this);
    if (this.complete && this.naturalWidth === 0) {
      handleBrokenImage($this);
    }
  });

  // Use event delegation to catch both existing and dynamically added images
  $(window).on('error', 'img', function() {
    handleBrokenImage($(this));
  });
});

Key Notes #

• DOM Ready: Wrapping the code in DOMContentLoaded (vanilla) or $(document).ready() (jQuery) ensures you don't miss any images that load before your script runs.
• Dynamic Images: The event capturing (vanilla) or jQuery's event delegation handles images added to the page after initial load (like lazy-loaded content or AJAX-rendered elements).
• Optional Tracking: Adding brokenImageUrl to the dataLayer push makes it much easier to debug which specific images are failing in your GTM reports.

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