Where is the Google Analytics pixel in my DOM?

Question

How can I identify, using JavaScript that a Google Analytics pixel (or any pixel for that matter) has been sent, and contains URL parameters i'm looking for?

I thought, since it's a tracking pixel, i could look for it in the DOM, but it doesn't look like it's ever inserted.

Can someone think of a way to analyze the network request made by google using javascript (not a chrome extension)?

something like

document.whenGooglePixelIsSentDoReallyCoolStuff(function(requestUrl){

});

Answer 1

A few things:

1) The tracking beacons aren't always pixels. Sometimes they're XHR and sometimes they use navigator.sendBeacon depending on the situation and/or your tracker's transport setting, so if you're just looking for pixels you could be looking in the wrong place.

2) You don't need to add an image to the DOM to get it to send the request. Simply doing document.createElement('img').src = "path/to/image.gif" is sufficient.

3) You don't need to use a Chrome extension to debug Google Analytics, you can simply load the debug version of the script instead of the regular version.

4) If you really don't want to use the debug version of Google Analytics and want to track what is sent programmatically, you can override the sendHitTask and intercept hits before they're sent.

Update (7/21/2015)

You've changed how your question is worded, so I'll answer the new wording by saying you should follow the suggestion I give in #4 above. Here's some code that would work with your hypothetical whenGooglePixelIsSentDoReallyCoolStuff function:

document.whenGooglePixelIsSentDoReallyCoolStuff = function(callback) {

  // Pass the `qa` queue method a function to get acess to the default
  // tracker object created via `ga('create', 'UA-XXXX-Y', ...)`. 
  ga(function(tracker) {

    // Grab a reference to the default `sendHitTask` function.
    var originalSendHitTask = tracker.get('sendHitTask');

    // Override the `sendHitTask` to call the passed callback.
    tracker.set('sendHitTask', function(model) {

      // When the `sendHitTask` runs, get the hit payload,
      // which is formatted as a URL query string.
      var requestUrl = model.get('hitPayload')

      // Invoke the callback passed to `whenGooglePixelIsSentDoReallyCoolStuff`
      // If the callback returns `false`, don't send the hit. This allows you
      // to programmatically do something else based on the contents of the
      // request URL.
      if (callback(requestUrl)) {
        originalSendHitTask(model);
      }
    });
  });
};

Note that you'd have to run this function after creating your tracker, but prior to sending your first hit. In other words, you'd have to run it between the following two lines of code:

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');