htmlimageemailgoogle-sheetsanalytics

Email tracker - Works but is it possible to show something other than a question mark icon in the Gmail client?


Taking inspiration from the answers in this StackOverflow post from years ago, I successfully created an email tracker image using Google Sheets. It functionally works to track but it shows a [?] icon instead of an image I am trying to make it show.

I simply have to copy and paste the image generated from this html <img src="https://script.google.com/macros/s/AKfycbyRRnH5iALMqMlgMs3QiWcdI3LiXgLXBtYTGNVBppmsKi_7-0An5PTmrSt0JYLT7m5g/exec?src=CodePen" /> into an email, and I am able to successfully track when an email is opened right into my Google Sheet Question mark icon that displays Google sheet entry showing tracked email opened

Here's the AppScript code I use, so you can test it too, and this is the CodePen from which I copy the rendered Email Tracker image to my Gmail compose message

I want to be able to send with an actual image instead of the [?]

If you use this code <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/> the browser will show a red dot, so I tried to make the GET API call return that date...== value as a Text, thinking that the HTML would pick it up, but that didn't work either. Any ideas?

UPDATE 1:

I improved the body of my question to reduce confusion. Based on the comment, I tried to use this approach to update my AppScript to return an HTML object using an image url as well as the SVG data...== object that I shared above but neither worked, I was still getting a [?] and making a GET API call now returns this in Postman

<!doctype html>
<html>

<head>
    <meta name="chromevox" content-script="no">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"
        nonce="VO2qwIJjLxZif_nTwjioww">
    <link rel="stylesheet" href="/static/macros/client/css/2972996970-mae_html_css_ltr.css">
    <script type="text/javascript" src="/static/macros/client/js/4136683848-warden_bin_i18n_warden.js"></script>
</head>

<body>
    <table id="warning-bar-table" class="full_size" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <div id="warning" class="warning-bar"></div>
            </td>
        </tr>
        <tr>
            <td style="height: 100%"><iframe id="sandboxFrame"
                    allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; clipboard-read *; clipboard-write *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; screen-wake-lock *; speaker *; sync-xhr *; usb *; web-share *; vibrate *; vr *"
                    sandbox="allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-storage-access-by-user-activation">
                </iframe>
            </td>
        </tr>
    </table>
    <script nonce="0SAAOkgbuqtmkYBmeBotjA">
        (function() {
var el = document.getElementById('sandboxFrame');
el.onload = function() {
goog.script.init("\x7b\x22functionNames\x22:\x5b\x22doPost\x22,\x22doGet\x22,\x22processResult\x22,\x22processRequest\x22,\x22test\x22,\x22testGet\x22\x5d,\x22sandboxMode\x22:\x22IFRAME_SANDBOX\x22,\x22callbackTimeout\x22:390000,\x22deploymentId\x22:\x22AKfycbyV9pX-2IejSGmic_bxCcm-uAGehnB5HoqPdLloyv0nnjf2Kw5zWbfHntJEFd0LGM2P\x22,\x22eei\x22:\x22\x22,\x22sandboxHost\x22:\x22https:\/\/n-hsuo5icdlgt7jj4tkbxzfgmypt6kltl2howxigy-0lu-script.googleusercontent.com\x22,\x22clientSideProperties\x22:\x7b\x22google.script.sandbox.mode\x22:\x22IFRAME_SANDBOX\x22,\x22google.script.host.origin\x22:\x22https:\/\/docs.google.com\x22\x7d,\x22actionPrefix\x22:\x22\/macros\/s\/AKfycbyV9pX-2IejSGmic_bxCcm-uAGehnB5HoqPdLloyv0nnjf2Kw5zWbfHntJEFd0LGM2P\x22,\x22userHtml\x22:\x22\x3cimg src \x3d \\\x22https:\/\/deafassistant.com\/images\/logo-dark.png\\\x22\x3e\x22,\x22ncc\x22:\x22\x7b\\\x22awhs\\\x22:true\x7d\x22\x7d", "", undefined, true , false  , "false", "https:\/\/n-hsuo5icdlgt7jj4tkbxzfgmypt6kltl2howxigy-0lu-script.googleusercontent.com", "\/\/drive.google.com\/abuse?id\x3dAKkXjoyWDgnsm9PsAF_BuBBvs0iOEeCXFbzzoMzKOqvAqAHlCbFd9J-o-WpTmnhuQ86AXAeDF6ywqfnS-O0oRRwHFebQx4ydYFg5B6fX%3A0");}
el.src = 'https:\/\/n-hsuo5icdlgt7jj4tkbxzfgmypt6kltl2howxigy-0lu-script.googleusercontent.com\/userCodeAppPanel';
}());
    </script>
</body>

</html>

Solution

  • If you cannot make a proxy that returns an image, then try this which may or may not be loaded by the email client

    <img height="1" width="1" style="visibility:hidden" 
    src="https://script.google.com/macros/s/AKfycbyRRnH5iALMqMlgMs3QiWcdI3LiXgLXBtYTGNVBppmsKi_7-0An5PTmrSt0JYLT7m5g/exec?src=CodePen" />
    

    An alternative to an actual proxy is to use mod rewrite

    https://httpd.apache.org/docs/2.2/rewrite/proxy.html