Log Service allows you to customize dimensions and metrics for log collection from the web, iOS, and Android platforms by using web tracking. This topic describes how to collect logs by using web tracking.

Background information

You can use web tracking to collect user information from browsers, iOS apps, or Android apps. The information includes:
  • Browsers, operating systems, and resolutions that are used by users
  • User browsing behavior, such as clicks and purchases on a website
  • The time that users spend on an app and whether users are active users of an app
Web Tracking

Precautions

  • After you enable web tracking for a Logstore, the write permissions on the Logstore are granted to anonymous users from the public network. This may generate dirty data.
  • The HTTP body of each GET request cannot exceed 16 KB.
  • You can call the PutLogs API operation by using the POST method to write a maximum of 3 MB or 4,096 log entries to Log Service. For more information, see PutLogs.

Step 1: Enable web tracking

  • Enable web tracking in the Log Service console.
    1. Log on to the Log Service console.
    2. In the Projects section, click the target project.
    3. Find the target Logstore, click the icon next to the name of the Logstore, and then click Modify.
    4. On the Logstore Attributes page that appears, click Modify in the upper-right corner of the page.
    5. Turn on the WebTracking switch and click Save.
  • Enable web tracking by using an SDK.
    The following script shows how to enable web tracking by using the Log Service SDK for Java.
    import com.aliyun.openservices.log.Client;
    import com.aliyun.openservices.log.common.LogStore;
    import com.aliyun.openservices.log.exception.LogException;
    public class WebTracking {
      static private String accessId = "your accesskey id";
      static private String accessKey = "your accesskey";
      static private String project = "your project";
      static private String host = "log service data address";
      static private String logStore = "your logstore";
      static private Client client = new Client(host, accessId, accessKey);
      public static void main(String[] args) {
          try {
              //Enable web tracking for an existing Logstore.
              LogStore logSt = client.GetLogStore(project, logStore).GetLogStore();
              client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), true));
              //Disable web tracking.
              //client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), false));
              //Create a Logstore for which you want to enable web tracking.
              //client.UpdateLogStore(project, new LogStore(logStore, 1, 1, true));
          }
          catch (LogException e){
              e.printStackTrace();
          }
      }
    }

Step 2: Collect log data

After you enable web tracking for a Logstore, you can upload data to the Logstore by using the following methods:
  • Use the SDK for JavaScript.
    1. Copy the script, paste the script to the loghub-tracking.js file, and save the file to your site folder.
    2. Add the following script to HTML documents. Then the loghub-tracking.js file is referenced in the HTML documents.
      <script type="text/javascript" src="loghub-tracking.js" async></script>
      Note To ensure smooth page loading, the script asynchronously sends HTTP requests. If data must be sent several times during page loading, the latest request overwrites the previous request. A message that indicates web tracking is about to exit appears in the browser. If you use synchronous request sending, this issue can be resolved. To do this, modify the script as follows:
      • Original script
        this.httpRequest_.open("GET",url,true)
      • Modified script
        this.httpRequest_.open("GET",url,false)
    3. Create a tracker.
      var logger = new window.Tracker('${host}','${project}','${logstore}');
      logger.push('customer', 'zhangsan');
      logger.push('product', 'iphone 6s');
      logger.push('price', 5500);
      logger.logger();
      logger.push('customer', 'lisi');
      logger.push('product', 'ipod');
      logger.push('price', 3000);
      logger.logger();
      Parameter Description
      ${host} The endpoint of Log Service in the region where your Log Service project resides. For more information, see Service endpoint.
      ${project} The name of the project.
      ${logstore} The name of the Logstore.
      After you run the preceding script, you can view the following log entries in the Log Service console.
      customer:zhangsan
      product:iphone 6s
      price:5500
      customer:lisi
      product:ipod
      price:3000
  • Use the GET method to send HTTP requests.
    Run the following command to upload logs. Replace the parameters as needed.
    curl --request GET 'http://${project}.${host}/logstores/${logstore}/track? APIVersion=0.6.0&key1=val1&key2=val2'
    Parameter Description
    ${project} The name of the project.
    ${host} The endpoint of Log Service in the region where your Log Service project resides. For more information, see Service endpoint.
    ${logstore} The name of the Logstore.
    APIVersion=0.6.0 Required. A reserved parameter.
    __topic__=yourtopic Optional. The log topic.
    key1=val1&key2=val2 The key-value pairs that you want to upload to Log Service. Make sure that the data size is less than 16 KB.
  • Use HTML <img> tags.
    <img class="img-responsive"src='http://${project}.${host}/logstores/${logstore}/track.gif? APIVersion=0.6.0&key1=val1&key2=val2'/>
    <img class="img-responsive"src='http://${project}.${host}/logstores/${logstore}/track_ua.gif? APIVersion=0.6.0&key1=val1&key2=val2'/>
    The track_ua.gif file contains custom parameters that you want to upload to Log Service. If you use this method to upload logs, Log Service records both the custom parameters and the UserAgent and referer HTTPS headers as log fields.
    Note To collect the referer header, make sure that the URL in the second <img> tag uses the HTTPS protocol.
  • Use the POST method to send HTTP requests.

    You can send an HTTP POST request to upload a large amount of data. For more information, see PutWebtracking.