I am creating a pixel image in javascript, by creating the image tag and injecting it into the DOM.
The tag looks something like this:
<img style="height:0;visibility:hidden;display:none;" src="http://xyz.com/pixel.aspx">
As you can see, this tag will actually call an ASP.Net page, which will do some processing and write back a pixel like this:
byte[] _imgbytes = Convert.FromBase64String("R0lGODlhAQABAIAAANvf7wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
Response.ContentType = "image/gif";
Response.AppendHeader("Content-Length", _imgbytes.Length.ToString());
Response.Cache.SetLastModified(DateTime.Now);
Response.Cache.SetCacheability(HttpCacheability.Public);
Response.BinaryWrite(_imgbytes);
What I need is a way to either pass a small piece of data (a GUID value generated in the javascript before the pixel request) to the server or pass some data (a different GUID generated in the pixel aspx code) back to the browser in a way in which it can be picked up by javascript.
Caveats:
- Cannot use query string, because the pixel needs to be cachable, and if query string is different the pixel will not be pulled from the browser cache (filename will be different) on subsequent requests.
- Cannot use cookies, pixel request is on different root domain than the application, and need this to work in the case where third party cookies are disabled.
- Cannot use AJAX, because don’t want to worry about cross-domain issues
I resolved this problem myself.
Instead of an image, I went with a remote script request. So my injected tag looks like this:
<script async src="http://xyz.com/tracking.aspx"></script>Then, in my aspx, I have the following:
When the response returns to the browser, the
Completemethod (which resides in a javascript file already loaded by the page) executes with my guid parameter. This enables my page to have full access to the guid.Also, since the request URL never changes, the script is properly cached by the browser.
Voila.