The Visitor Tracker

Laravel Add-on

For some clients Google Analytics can be too complicated to navigate so I developed my own simple solution, I will add it was alot of fun! Utilizing a the jVectorMaps jQuery Plug-in and the Torann - Laravel Geo-Ip Package this solution plots red circle markers on a world map to indicate where visitors are coming from. Additionally the visitor data captured is stored in a database which is displayed on a responsive, paginated, searchable and, sortable table. The Visitor Table offers summary and detailed views including flag icons beside the country names with the ability to export data to Microsoft Excel files. The Visitor Tracker uses a series of Ajax calls and never reloads the page. Currently, its capturing and storing the following data:

  • ip
  • iso_code
  • country
  • city
  • state
  • state_name
  • postal_code
  • lat
  • lon
  • timezone
  • currency
  • userAgent
  • created_at

 The Section Below is Laravel MVC PHP using AJAX Requests

This is the AJAX driven section and when an element is clicked on, this section will use an AJAX call returning JSON objects to update the content.

World Map

Visitors

 The Section Below is LIVE using Vue.js and Pusher

Slack Notification System

Slack Notifications And More

This is the Event Listener section and when the event is fired off, this section will listen to a laravel notification event generated by a visitor landing on the main page of this site corewebmedia.ca. The event will update the map, chart and data table below each time there is a visitor as well as send out a Slack notification to corewebmedia Slack channel which can be recieved on any device running the Slack application. I have attached the screen shot of the Slack recieving the data from the notification event. This solution is coded with Vue.js and JavaScript with is compiled on the server with WebPack and it uses Pusher to handle the notification requests. This particular event system can be used in any application and can notify you in the event of any CRUD event. This is a great feature to use on internal information screens.

A new user has been detected!