simple JS to collect about:home snippet-id via AJAX

RESOLVED FIXED

Status

defect
RESOLVED FIXED
8 years ago
7 years ago

People

(Reporter: aphadke, Assigned: osmose)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

Posted image snippet impression
The marketing team is interesting in knowing the impression counts for the snippets on Firefox; about:home, see attached screenshot for sample snippet.
Metrics team is going to be collecting the impressions using Bagheera via REST API. 
The impressions will be throttled to around 1% and only the "snippet-id" needs to be collected.

Technical details:
Metric to be collected: snippet-id
REST URL: https://<metrics_server>/snippet/
Method: POST
Body: (valid JSON with snippet-id)
{"snippet_id": "a2031"}
Blocks: 653268
sample JS code with sampling for reference. This is a GET request with snippet_id in URL, we need a POST request with snippet_id in the body.


<script type="text/javascript">

function pixelDrop(snippet_id) {

	var xmlhttp;
	var pixelurl = "http://metrics.mozilla.com/p.php";
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
		}
	else {// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function() {
	}
	
	xmlhttp.open("GET",pixelurl,true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	
	var pixel = new Image();
	pixel.src = pixelurl + '?snippet_id=' + snippet_id;
	xmlhttp.close;
}

throttle = 0.9; //90-percent throttle
a = Math.random(); 
if (a > throttle) {
	pixelDrop("a321"); //a321 == snippet id
}

</script>
<html>
	hello world
</html>
@erik: can you comment on the bug with timelines
Thx,
Assignee: erik → nobody
Component: Web Sniffer → Service
Product: Webtools → Snippets
QA Contact: web.sniffer → service
Version: Trunk → unspecified
(In reply to aphadke from comment #1)

> <script type="text/javascript">
> 
> function pixelDrop(snippet_id) {
> 
> 	var xmlhttp;
> 	var pixelurl = "http://metrics.mozilla.com/p.php";
> 	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
> 	xmlhttp=new XMLHttpRequest();
> 		}
> 	else {// code for IE6, IE5
> 		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
> 	}
> 	xmlhttp.onreadystatechange=function() {
> 	}
> 	
> 	xmlhttp.open("GET",pixelurl,true);
> 	xmlhttp.setRequestHeader("Content-type","application/x-www-form-
> urlencoded");
> 	
> 	var pixel = new Image();
> 	pixel.src = pixelurl + '?snippet_id=' + snippet_id;

Why the ajax GET as well as the image linking?

Does the URL at the metrics server respond with the "Access-Control-Allow-Origin: *" header? If so, we can post to it. Here's my version which POSTs to it:

    <script type="text/javascript">
      var xmlhttp;
      var params = '{"snippet_id": "a2031"}';
      var url = 'http://metrics.mozilla.com/p.php';

      if(window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
      }
      else {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

      xmlhttp.open('POST', url, true);
      xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xmlhttp.setRequestHeader('Content-Length', params.length);

      xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          }
      };

      xmlhttp.send(params);
    </script>
@jlongster:
Thx for the snippet, agree that including GET and POST in same JS call isn't right.
If it's for about:home, you don't need: 
      else {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

Be careful also, this could generate a preflighted request: https://developer.mozilla.org/En/HTTP_access_control#Preflighted_requests.

Also, you have no error detection in this code. This is not necessary but just mentioning that for debugging purposes.
aphadke: Do you want to track every snippet, or only snippets that are marked for tracking?

If we opt to track every snippet, there would be difficulty embedding the snippet-id in every snippet, because some snippets aren't actually displayed, but provide Javascript for other snippets (in fact, the code for this tracking would be one of those snippets).

If we opt to mark snippets for tracking, we can provide names for them, which will make determining which snippet is which much easier as well. I would favor this method to tracking every single snippet.
Assignee: nobody → mkelly
@mkelly:
We'll be tracking specific snippets. The stake holder, @lforrest in this case, will be inserting the JS code in the snippets that she wishes to track. 

The new snippet looks like this:

	function pixelDrop(snippet_id) {
	
		var xmlhttp;
		var url = 'http://localhost:9999/?snippet_id=' + snippet_id;
		
		if(window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		}
		
		xmlhttp.open('GET', url, true);

		
		xmlhttp.onreadystatechange = function() {
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			}
		};
		
		xmlhttp.send();
	}
	
	throttle = 0.9; //90-percent throttle
	if (Math.random() > throttle) {
		pixelDrop("c202");
	}
Specific snippets are fine at this point. 

@MKelly: note that eventually something like a check box that says "Track Impressions?" within the UI of the snippet service would be good to build in. We may want to revisit that sooner rather than later depending on how this first implementation goes.
I agree that a checkbox is a good idea. Once we get a test snippet with this code working we can add it to the UI.

@aphadke: I can set up a test snippet to see if data will flow to the server. What's the final URL to POST to? https://metrics.mozilla.com/snippets/ ?
Depends on: 698815
Blocks: 719090
Adding a note here that came up from yvan...

We should respect Do Not Track, so if this is set the JS should not be fired.
(In reply to Ben (:bensternthal) from comment #10)
> We should respect Do Not Track, so if this is set the JS should not be fired.

Sorry to butt in, but I think tracking is distinctly different from counting.
Interesting point...

Does our WebTrends setup do anything different when DNT is set?
I am checking with legal/privacy.
Fred is correct and confirmed with Alina:

"DNT shouldn't affect analytics data collection"

So for this project we do not need to look at DNT.
The JS for sending the data is currently on stage. Marking as resolved.

We've created a repo for snippet code, and the JS in question can be seen at https://github.com/mozilla/snippets/commit/b0d3b1dc03d1e7cfdbc674175a28437fad68e258#diff-28
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.