Как правильно написать JS, который будет включен в другие сайты?

Question

Мне нужно написать скрипт, который я хочу включить на разных сайтах (что-то похожее на Google Analytics JS, которое вы должны включить в страницы вашего сайта).

Этот скрипт должен отправить одному из моих сервлетов (я использую Java) запрос.

В сервлете мне нужно увеличить некоторые переменные и после этого вернуть изображение клиенту. Изображение будет отображаться на веб-сайте, к которому пользователь обратился.

Мне также нужно получить информацию о клиенте (ip и т. Д.) В сервлете. если я использую метод getRemoteAddr (), будет ли он работать в этом случае?

Кроме того, мне нужно отслеживать изображения, которые я показываю клиенту (я не знаю, где это должно быть, на стороне клиента или на стороне сервера).

Какой правильный способ сделать это?

Answer 1

Ваш JS должен распечатать / добавить <img>, указывающий на прозрачное изображение GIF 1x1, к документу. Вся информация, собранная JS, может быть отправлена ​​в виде строки запроса на URL изображения. Google Analytics делает похожую вещь .

В основном:

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

с:

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 + '" />');

Затем на yourdomain.com необходимо сопоставить сервлет с 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>

В методе doGet() сервлета вы можете собрать всю информацию и, наконец, вернуть настоящее изображение 1x1 gif:

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

Допустим, вы делаете это с помощью PHP:

Файл: 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

Вы можете просто поставить тег изображения, как это

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

и подать изображение из этого запроса тогда вам не нужно распространять скрипт

информация о запрашивающем пользователе есть в сервлете api