what's the proper way to write a js that will be included in other websites?

Question

I need to write a script which i want to include on different websites(something similiar with the google analytics js that you have to include in your website pages).

This script has to send to one of my servlets(i'm using java) a request.

In the servlet i need to increment some variables and after that return an image to the client. The image will be displayed on the website the user accessed.

I also need to get the client's information (ip,etc) in the servlet. if i use getRemoteAddr() method, will it work in this case?

Furthermore i need to keep track on the images i displayed to the client.(i don't know where this should be, client side or server side).

Whics is the proper way of doing this ?

Answer 1

Your JS has to print/append an <img> pointing to a 1x1 transparent GIF image to the document. All information collected by JS can be sent as a query string on the image URL. Google Analytics does similar thing .

Basically:

<script src="http://yourdomain.com/track.js"></script>

with:

var requestURI = window.location;
var referrer = document.referrer;
var resolution = screen.width + 'x' + screen.height;
var colorDepth = screen.colorDepth;
// ...

var query = '?requestURI=' + encodeURIComponent(requestURI)
          + '&referrer=' + encodeURIComponent(referrer)
          + '&resolution=' + encodeURIComponent(resolution)
          + '&colorDepth=' + encodeURIComponent(colorDepth);

document.write('<img src="http://yourdomain.com/track.gif' + query + '" />');

Then, in yourdomain.com, you have to map a servlet on the image URL:

<servlet>
    <servlet-name>trackServlet</servlet-name>
    <servlet-class>com.example.TrackServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>trackServlet</servlet-name>
    <url-pattern>/track.gif</url-pattern>
</servlet-mapping>

In the doGet() method of the servlet you can gather all information and finally return a real 1x1 gif image:

private static final byte[] GIF = {
    71, 73, 70, 56, 57, 97, 1, 0, 1, 0, -16, 0, 0, 0, 0, 0, 0, 0, 0, 33, -7,
    4, 1, 0, 0, 0, 0, 44, 0, 0, 0, 0, 1, 0, 1, 0, 0, 2, 2, 68, 1, 0, 59
};

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // Gather JS-collected parameters.
    String requestURI = request.getParameter("requestURI");
    String referrer = request.getParameter("referrer");
    String resolution = request.getParameter("resolution");
    String colorDepth = request.getParameter("colorDepth");
    // ...

    // Gather server-collected parameters.
    String remoteAddr = request.getRemoteAddr();
    String userAgent = request.getHeader("user-agent");
    // ...

    // Send 1x1 transparent gif (and disable browser caching on it!)
    response.setHeader("Content-Type", "image/gif");
    response.setHeader("Cache-Control", "no-cache,no-store,must-revalidate");
    response.setHeader("Pragma", "no-cache");
    response.setDateHeader("Expires", 0);
    response.getOutputStream().write(GIF);
}

Answer 2

Let's say you're doing this with PHP:

File: api.js.php

<?php

    // get user ip and do something with it
    $ip = $_SERVER['REMOTE_ADDR'];

    // since we're in a PHP file, we need to tell the client it's actually JS
    header('Content-Type: application/javascript',true);

?>

// your regular JS folows here
alert('Hi there');

Answer 3

you can just put an image tag like this

<img href="yourserver.com/the-servlet-path" />

and serve the image from that request then you dont need to distribute a script

the information about the requesting user is all in the servlet api