Grid Signals: Getting Started / Phygrid Developers

What is Grid Signals?

Grid Signals is a powerful library designed to manage sessions, identify users, and link different sessions belonging to the same user. It also integrates seamlessly with Spaces, allowing you to group physical devices and virtual entities that share a common state in a specific physical location.

Spaces in Grid Signals

A Space represents a physical or virtual location where devices and activities are grouped together. Within this Space, Grid Signals helps you track the actions and behaviors of all users, giving you a clear picture of what's happening in that location.

See the Spaces user guide to learn more.

Tracking Users Across Devices

Grid Signals also lets you track a single user's activity across multiple devices. This is especially useful for creating seamless, personalized experiences. For instance:

Imagine a user interacts with a product catalog on an in-store kiosk and then scans a QR code to continue browsing on their mobile device.
Grid Signals makes it easy to transfer session information—like their shopping cart or current page—between devices without interruptions.

By connecting Spaces and sessions, Grid Signals provides insights into both group-level activities (within a Space) and individual user journeys (across devices). This makes it an essential tool for delivering context-aware, user-centric experiences.

Getting Started

Install the Grid Signals library to any of your applications.

Set-up

React

npm install @ombori/grid-signals-react
or
yarn add @ombori/grid-signals-react

Javascript

NodeJS and other client-side javascript libraries

npm install @ombori/grid-signals
or
yarn add @ombori/grid-signals

Notes

@ombori/grid-signals-react is a package with @ombori/grid-signals and @ombori/ga-settings as dependencies, built for easier initialization and better support for React-based applications. Everything that you can import from @ombori/grid-signals is also in @ombori/grid-signals-react.
You can use @ombori/grid-signals package for other JS libraries or server-side applications.

Basic Usage

Example in React:

import React from "react"
import { useGridSignals, getInstance as gs } from "@ombori/grid-signals-react"
const App = () => {
  const isReady = useGridSignals()
  if (!isReady) {
    return <div>Initializing App</div>
  }
  return <MainPage />
}

const MainPage = () => {
  React.useEffect(() => {
    gs().sendContentView({
      title: "omborigrid_homepage",
      url: "https://omborigrid.com",
    })
  }, [])

  return (
    <div>
      <div>Welcome to the main page!</div>
    </div>
  )
}

export default App

Creating a session

By default, during init, it creates an initial session under the hood. You can create or start a new session by invoking createSession function anywhere in your app.

import { getInstance as gs} from '@ombori/grid-signals-react';
...
gs().createSession();
...

Ending a session

You don't need to invoke a session end event. The last event within the specific session is considered as the session end timestamp.

Tracking Events

There are two ways to track events:

Standard Session Event - standardized events and related parameters for easier data analysis
Custom Session Event - custom events based on your needs

Offline Support

Grid Signals library stores events in Localstorage for screen and mobile apps out-of-the-box, when the device is offline or has an intermittent internet connection.

Develop in NodeJs

The Grid Signals Library is not limited to react-based applications, it can also be used for other client-side javascript libraries, and server-side with NodeJS.

Basic Example

import GridSignals from '@ombori/grid-signals';

...

const gs = new GridSignals();
await gs.init({
  deviceId: 'XXXXXXXXXXXXXXXXXXXXXXXX',
  installationId: 'XXXXXXXXXXXXXXXXXXXXXXXX',
  spaceId: 'XXXXXXXXXXXXXXXXXXXXXXXX',
  tenantId: 'XXXXXXXXXXXXXXXXXXXXXXXX',
  appVersion: 'XXXXXXXXXXXXXXXXXXXXXXXX',
  appId: 'XXXXXXXXXXXXXXXXXXXXXXXX',
  environment: 'PROD',
  dataResidency: 'EU',
  country: 'SE',
  installationVersion: 'XXXXXXXXXXXXXXXXXXXXXXXX',
  accessId: 'XXXX',
  accessToken: 'XXXX',
});

await gs.sendCustomEvent({
  eventType: 'RECYCLE',
  interaction: true,
  str1: 'bottles', // unit
  int1: 5, // quantity
});

...

Grid Signals: Getting Started