Adding a tracking pixel on presending but it is getting tracked

[Emad Ibrahim]

I am adding a tracking pixel like this

    composeView.on('presending', async ()=>{

      var messageId = await composeView.getCurrentDraftID();

      composeView.insertHTMLIntoBodyAtCursor(`<img id="dnfTrackingPixel" src="https://xxxxxx-fe09f.cloudfunctions.net/api/track/${messageId}" width="60px">`)

    });

The problem is that it actually tracks the "send" as an "open" because it tries to load the image.  Is there anyway to prevent this?  I saw an answer in this group about using a proxy or something like that but I didn't fully understand it.

[Chris Cowan]

You can have an extension background script which blocks the image from loading by using the `chrome.webRequest.onBeforeRequest.addListener` function.

[Amiram Korach]

Yes there is a way to prevent this. You need to add code that will block such requests. This kind of request can be made with two different urls:

1. If you are composing a message, gmail will call your url directly for your browser.

2. If you are viewing the message you sent, gmail will use its proxy. It won't call it directly from your browser and the url will be different, like *googleusercontent.com*[some long hash].

The way to do it is to add a background script that will block the calls, or better, redirect them to a noop endpoint so there won't be any errors in network log.

For direct urls we're redirecting them from "mail-opened" to "mail-opened-noop" and in the server we just return the pixel and ignore it.

For proxy urls, you don't want to block all such urls, just the tracking ones. The problem is that this url doesn't have your url in it, but if you include a query string, gmail will add your url at the end.

browser.webRequest.onBeforeRequest.addListener(details => {

    // we got here because we redirected to it
    if (details.url.includes('mail-opened-noop')) {
        return; // continue to make the request. The server will ignore it.
    }

    // block pixel images requested through gmail proxy. they cannot be redirected. They will include 'mail-opened' if there was a query string in your url
    if (details.url.includes('googleusercontent.com/proxy') && details.url.includes('mail-opened')) {
        return {
            cancel: true
        };
    }

    const redirectUrl = details.url.replace('mail-opened', 'mail-opened-noop');

    console.log(`Redirecting mail opened request from ${details.url} to ${redirectUrl}`);
    return {
        redirectUrl
    };
}, {urls: ['*://*/mail-opened/*', '*://*.googleusercontent.com/proxy/*']}, ['blocking']);

[Jose R. Lopez]

Hey, I just came across this and found it interesting.  However, it does not appear to be working anymore.  I read on another help thread that Chrome updated so that you cannot block googleusercontent.com images.  Is this in fact the case? is there another way around it?

Thanks.

[Amiram Korach]

The code is still working for me. Maybe you didn't add permissions? In your manifest, there should be this:

"permissions": [
    "webRequest",
    "webRequestBlocking",
    "*://*.googleusercontent.com/",
],

--
You received this message because you are subscribed to the Google Groups "InboxSDK" group.
To unsubscribe from this group and stop receiving emails from it, send an email to inboxsdk+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/4f27dc5e-32f1-46f2-8745-743d8da3e66bn%40googlegroups.com.

[Jose R. Lopez]

Ha! LEGEND, that's exactly it.  I was missing 

"*://*.googleusercontent.com/",  

In my permissions, that's why they weren't showing up on console for me.  Seems to be working pretty well.  Thank you kindly!