ComponentOne
Web API Explorer ASP.NET Web API Explorer
Visitor

Visitor

Overview

The .NET Core Visitor Web API collects user data such as IP, Geographical location, language, referring site, session, operating system, device, browser. It's useful for web developers to customize content for individual users

Features

Overview
Available Variables
Unique Visitor Id

Visitor Overview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
  
namespace WebApiExplorer.Controllers.Visitor
{
  public partial class VisitorController : Controller
  {
    Dictionary<string, string> Resources = new Dictionary<string, string>()
    {
      { "time_just_now", Localization.Visitor.Time_Just_Now},
      { "time_minutes_ago", Localization.Visitor.Time_Minutes_Ago},
      { "time_hours_ago", Localization.Visitor.Time_Hours_Ago},
      { "time_days_ago", Localization.Visitor.Time_Days_Ago},
      { "time_months_ago", Localization.Visitor.Time_Months_Ago},
      { "time_years_ago", Localization.Visitor.Time_Years_Ago},
      { "txt_much_more", Localization.Visitor.Txt_Much_More},
      { "welcome_message", Localization.Visitor.Welcome_Message},
      { "browsing_time", Localization.Visitor.Template_Browsing_Time},
      { "device_info", Localization.Visitor.Template_Device_Info},
      { "ip_address", Localization.Visitor.Template_Ip_Address},
      { "landed_time", Localization.Visitor.Template_Landed_Time},
      { "last_visit", Localization.Visitor.Template_Last_Visit},
      { "location_info", Localization.Visitor.Template_Location_Info},
      { "visitor_shown", Localization.Visitor.Template_Visitor_Shown},
      { "visits_time", Localization.Visitor.Template_Visits_Time},
      { "no_location_found", Localization.Visitor.No_Location_Found},
    };
   
    public IActionResult Index()
    {
      ViewBag.Resources = this.Resources;
      return View();
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
  
@{
    ViewBag.DemoDescription = false;
    var Resources = @Html.Raw(Json.Serialize(ViewBag.Resources));
}
  
<script>
    function loadedContent() {
        c1.webapi.VisitorConfig.API_HOST.url = "https://demos.componentone.com/ASPNET/5/C1WebAPI/3.0.20202.265";
    }
</script>
  
<script src="@(Configuration["WebAPIService"])api/visitor/visitor-client.min.js" onload="loadedContent();"></script>
<style>
    #visualize-container {
        line-height: 30px;
    }
  
        #visualize-container li {
            padding-left: 20px;
            list-style-type: square;
            list-style-position: inside;
        }
  
    .grid-col {
        flex: 1 0 25%;
        max-width: 25%;
        overflow-wrap: break-word;
    }
</style>
  
<h4>
    @Html.Raw(Visitor.Txt_Overview)
</h4>
<div id="visualize-container"></div>
<p id="license-info"></p>
  
  
@section Summary{
    @Html.Raw(Visitor.Description)
}
  
  
  
<script>
  var resources = @Resources;
  var browsingTimeIntervalID;
  
  if (!String.prototype.format) {
    String.prototype.format = function () {
      var args = arguments;
      return this.replace(/{(\d+)}/g, function (match, number) {
        return typeof args[number] != 'undefined'
          ? args[number]
          : match
          ;
      });
    };
  }
  
  function getWelcomeMessage(visitor) {
    if (!visitor || !visitor.firstSession) return "";
    let isFirstEnter = visitor.firstSession.visits == 1;
    if (isFirstEnter) {
      return resources.welcome_message;
    } else {
       return resources.visits_time.format(visitor.firstSession.visits);
    }
  }
  function getIPAddressMessage(visitor) {
    return "{0} {1}.".format(resources.ip_address, visitor.ip.address);
  }
  function getLocationMessage(visitor) {
    return visitor.geo.countryName ? resources.location_info.format(visitor.geo.cityName + " " + visitor.geo.countryName) : resources.no_location_found;
  }
  
  function getDeviceMessage(visitor) {
    return resources.device_info.format(visitor.browser.name, visitor.browser.version, visitor.os.name, visitor.os.version, visitor.os.platform);
  }
  
  function getFistVisitMessage(visitor) {
    return resources.landed_time.format(timeAgo(new Date(visitor.firstSession.start))) + ((visitor.firstSession.visits == 1) ? "" : (" " + resources.last_visit.format(timeAgo(new Date(visitor.firstSession.prev_visit)))));
  }
  
  function getCurrentSessionTime(visitor) {
    return resources.browsing_time;
  }
  
  function timeAgo(fromDate, toDate) {
    if (!fromDate) return;
    var minutesDiff = Math.floor(((toDate ? toDate.getTime() : Date.now()) - fromDate.getTime()) / (60*1000));
    var hoursDiff = Math.floor(minutesDiff / 60);
    var daysDiff = Math.floor(minutesDiff / (60 * 24));
    var monthsDiff = Math.floor(minutesDiff / (60 * 24 * 30));
    var yearsDiff = Math.floor(minutesDiff / (60 * 24 * 30 * 12));
    var displayTemplate = "{0} {1}";
    if (yearsDiff >= 1) return displayTemplate.format(yearsDiff, resources.time_years_ago);
    if (monthsDiff >= 1) return displayTemplate.format(monthsDiff, resources.time_months_ago );
    if (daysDiff >= 1) return displayTemplate.format(daysDiff, resources.time_days_ago );
    if (hoursDiff >= 1) return displayTemplate.format(hoursDiff, resources.time_hours_ago );
    if (minutesDiff >= 1) return displayTemplate.format(minutesDiff, resources.time_minutes_ago );
    return resources.time_just_now;
  }
  
  function render(visitor) {
    var content = "";
    content += "<h3>{0}</h3>".format(getWelcomeMessage(visitor));
    content += "<p>{0}</p>".format(resources.visitor_shown);
    content += "<ul>";
    content += "<li>{0}</li>".format(getIPAddressMessage(visitor));
    content += "<li>{0}</li>".format(getLocationMessage(visitor));
    content += "<li>{0}</li>".format(getDeviceMessage(visitor));
    content += "<li>{0}</li>".format(getFistVisitMessage(visitor));
    content += "<li>{0} <span id=\"browsing_time\"></span></li>".format(getCurrentSessionTime(visitor));
    content += "<li><a href=\"/Visitor/AvailableVariables\">{0} ..</a></li>".format(resources.txt_much_more);
    content += "</ul>";
  
    document.getElementById("visualize-container").innerHTML = content;
  
    if (visitor) {
      browsingTimeIntervalID = setInterval(function () {
        var browsingTimeEle = document.getElementById("browsing_time");
        if (visitor && browsingTimeEle) {
          browsingTimeEle.innerText = Math.floor((Date.now() - new Date(visitor.session.start).getTime()) / 1000) + " s";
        } else {
          clearInterval(browsingTimeIntervalID);
        }
      }, 1000);
    };
    renderIp2LocationLicensing();
  }
  
  function isIp2Location() {
    if (!c1.webapi.VisitorConfig || !c1.webapi.VisitorConfig.SERVER_DATA) return false;
    var visitorData = c1.webapi.VisitorConfig.SERVER_DATA;
    if (visitorData) {
      return visitorData.locationProviderType == 1;
    }
    return false;
  }
  
  function renderIp2LocationLicensing() {
    if (!isIp2Location()) return;
    var ele = document.getElementById("license-info");
    if (ele) {
      ele.innerHTML = "<small>This product includes IP2Location LITE data available from <a href=\"https://www.ip2location.com\">https://www.ip2location.com</a> </small>";
    }
  }
  window.visitor.getDataAsync(function (data) {
    render(data);
  });
</script>