Building an on-premise mode
In this tutorial, we show you how to use geofences in Radar to show an on-premise mode when a user is in a geofence.
#
Steps#
Step 1: Sign up for RadarIf you haven't already, sign up for Radar to get your API key. You can create up to 1,000 geofences and make up to 100,000 API requests per month for free.
Get API keys#
Step 2: Create geofencesThere are several ways to create geofences:
The tag
is a group for the geofence. For example, you could set tag = venue
for gaming, or tag = restaurant
for restaurants. In this tutorial, we're going to use tag = store
.
#
Step 3: Initialize the SDKInitialize the SDK with your publishable API key.
- Swift
- Kotlin
- Web
- React Native
import UIKitimport RadarSDK
@UIApplicationMainclass AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { Radar.initialize(publishableKey: "prj_test_pk_...") Radar.setUserId("foo")
return true }
}
import io.radar.sdk.Radar
class MyApplication : Application() {
override fun onCreate() { super.onCreate()
Radar.initialize(this, "prj_test_pk...") Radar.setUserId("foo") }
}
<html> <head> <title>Hello, world!</title> <script src="https://js.radar.com/v4/radar.min.js"></script> </head> <body> <div id="content"> </div>
<script type="text/javascript"> Radar.initialize("prj_test_pk_..."); Radar.setUserId("foo") </script> </body></html>
import React, { useState, useEffect } from "react";import Radar from "react-native-radar";
export default function App() { useEffect(() => { Radar.initialize("prj_live_pk_..."); Radar.setUserId("foo") }, []);
return ( <div id="content"> </div> );}
#
Step 4: Request foreground permissions- Swift
- Kotlin
- Web
- React Native
import UIKitimport RadarSDKimport CoreLocation
@UIApplicationMainclass AppDelegate: UIResponder, UIApplicationDelegate, CLLocationManagerDelegate {
let locationManager = CLLocationManager()
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { Radar.initialize(publishableKey: "prj_test_pk_...") Radar.setUserId("foo")
self.locationManager.delegate = self self.requestLocationPermissions()
return true }
func requestLocationPermissions() { let status = self.locationManager.authorizationStatus
if status == .notDetermined { self.locationManager.requestWhenInUseAuthorization() } }
}
import android.Manifestimport android.app.AlertDialogimport android.content.pm.PackageManagerimport android.os.Build
import androidx.core.app.ActivityCompat
import io.radar.sdk.Radar
class MainActivity : AppCompatActivity() { private val foregroundLocationPermissionsRequestCode = 1
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState)
Radar.initialize(this, "prj_test_pk_...") Radar.setUserId("foo")
requestLocationPermissions() }
private fun requestLocationPermissions() { if (ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED) { ActivityCompat.requestPermissions(this, arrayOf(Manifest.permission.ACCESS_COARSE_LOCATION, Manifest.permission.ACCESS_FINE_LOCATION), foregroundLocationPermissionsRequestCode) } }
}
When Radar.trackOnce()
is called, the browser will automatically prompt for foreground permissions.
<html> <head> <title>Hello, world!</title> <script src="https://js.radar.com/v4/radar.min.js"></script> </head> <body> <div id="content"> </div>
<script type="text/javascript"> Radar.initialize("prj_test_pk_..."); Radar.setUserId("foo");
Radar.trackOnce(); </script> </body></html>
import React, { useState, useEffect } from "react";import Radar from "react-native-radar";
export default function App() { useEffect(() => { Radar.initialize("prj_live_pk_..."); Radar.setUserId("foo")
Radar.requestPermissions(false).then((status) => { // status will be "GRANTED_FOREGROUND" if permissions were granted }); }, []);
return ( <div id="content"> </div> );}
Learn about platform-specific permissions in the iOS SDK documentation and Android SDK documentation.
#
Step 5: Change the UI when the user is in a geofenceCall Radar.trackOnce()
to track the user's location in the foreground. In the callback, check user.geofences
to determine if the user is in a store, then change the UI to show the on-premise experience.
- Swift
- Kotlin
- Web
- React Native
import UIKitimport RadarSDKimport CoreLocation
@UIApplicationMainclass AppDelegate: UIResponder, UIApplicationDelegate, CLLocationManagerDelegate {
let locationManager = CLLocationManager()
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { Radar.initialize(publishableKey: "prj_test_pk_...") Radar.setUserId("foo")
self.locationManager.delegate = self self.requestLocationPermissions()
Radar.trackOnce { (status, location, events, user) in let isInStore = user?.geofences?.contains { $0.tag == "store" } if isInStore { // show on-premise mode } }
return true }
func requestLocationPermissions() { let status = self.locationManager.authorizationStatus
if status == .notDetermined { self.locationManager.requestWhenInUseAuthorization() } }
}
import android.Manifestimport android.app.AlertDialogimport android.content.pm.PackageManagerimport android.os.Build
import androidx.core.app.ActivityCompat
import io.radar.sdk.Radar
class MainActivity : AppCompatActivity() { private val foregroundLocationPermissionsRequestCode = 1
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState)
Radar.initialize(this, "prj_test_pk_...") Radar.setUserId("foo")
requestLocationPermissions() }
override fun onStart() { super.onStart()
Radar.trackOnce { status, location, events, user -> val isInStore = user?.geofences?.any { geofence.tag == "store" } if (isInStore) { // show on-premise mode } } }
private fun requestLocationPermissions() { if (ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED) { ActivityCompat.requestPermissions(this, arrayOf(Manifest.permission.ACCESS_COARSE_LOCATION, Manifest.permission.ACCESS_FINE_LOCATION), foregroundLocationPermissionsRequestCode) } }
}
<html> <head> <title>Hello, world!</title> <script src="https://js.radar.com/v4/radar.min.js"></script> </head> <body> <div id="content"> </div>
<script type="text/javascript"> Radar.initialize("prj_test_pk_..."); Radar.setUserId("foo");
Radar.trackOnce().then((result) => { const user = result.user; for (const geofence of user.geofences) { if (geofence.tag === 'store') { // show on-premise mode } } }).catch((err) => { // handle error }); </script> </body></html>
import React, { useState, useEffect } from "react";import Radar from "react-native-radar";
export default function App() { const [isInStore, setIsInStore] = useState(false);
useEffect(() => { Radar.initialize("prj_live_pk_..."); Radar.setUserId("foo");
Radar.requestPermissions(false).then((status) => { // status will be "GRANTED_FOREGROUND" if permissions were granted
Radar.trackOnce().then((result) => { const { user } = result; for (const geofence of user.geofences) { if (geofence.tag === 'store') { setIsInStore(true); } } }).catch((err) => { // handle error }); }); }, []);
return ( <div id="content"> { isInStore ? ( {/* Show on-premise mode */} ) : ( {/* Show default UI */} )} </div> );}
#
SupportHave questions or feedback on this documentation? Let us know! Email us at support@radar.com.