The purpose of this sample application is to demonstrate how one can implement event-driven notifications with OneSignal. It works by splitting user onboarding into three steps.
- Signup
- Onboarding
- Welcome
This stage is the end-users first touch point with the app. Upon entering an email address, a request is sent to the backing API.
- Create a new user account
- Send a
signupevent via Segment'strackfunction
If successful, the new user ID is returned to the client and setExternalUserId is called with the new ID. This results in Segment receiving a new event that it then forwards to OneSignal.
This stage is demonstrates a typical user onboarding after the user account has been created. You can think of this step as an in-between step that ensures your application has all the information it needs to move forward and for the end-user to get acquianted with the application. In this example, I collect an email before making a request to the backing API.
- Update the user account with onboarding details (not implemented)
- Send an
onboardedevent via Segment'strackfunction
This step marks the completion of new user registration. It's at this point where the notification email is be sent.
Navigate to your OneSignal dashboard and click the New App/Website button.
On the New App / Website page, provide a name for your app and select the Web platform. You can optionally assign your new app to an existing organization. Click the button labeled Next: Configure Your Platform.
On the Web Configuration page, select the Custom Code integration Provide a name for the site and the URL the app is hosted on. If you are developing your app locally, set the URL to localhost and specify the port your app listens to. Note that you will be presented the option to treat traffic from your dev environment as HTTPS. Click the Save button to complete the app setup process.
From the Home page of your Segment app, navigate to the Sources page. Click the Add Source button.
Search for node in the Sources catalog and select Node.js from the search results.
Click the Add Source button from the modal window upon which you will be taken to the Source setup page.
Provide a name for your source then click the Add Source button to complete the source setup.
Once you’ve successfully added your source, you will be presented with the Overview for your newly created source. From here, you will have access to your Write Key which we will use in our app.
To complete the Segment integration with OneSignal, we need to add a Segment destination. You can accomplish this by navigating to the Destinations page and clicking the Add Destination button; however, going this route requires a couple of manual steps. To simplify this process, we can use OneSignal to set up the destination in Segment.
Navigate to your OneSignal app’s Settings, select the Analytics from the submenu, then click the Activate button within the Segment.com card. Note that you may be requested to log in to your Segment account.
You will be prompted to select the Segment workspace and source for which you’d like to add a OneSignal destination. Once your selections have been made, click the Allow button.
Upon completion, you will have a new destination configured in Segment.
Now that we’ve configured the Segment integration, we can add the final piece needed for this use-case: email delivery. This guide uses the OneSignal Mailgun integration for mail delivery. Email setup is outside the scope of this guide however. Fortunately email setup is a straightforward process and you can find instructions for integrating with Mailgun in our docs.
If you would like to run this sample, you will need
- A OneSignal account (create one)
- A Segment account (create one)
- A Mailgun account (create one)
- An env file named
env.localwith the variables:SEGMENT_WRITE_KEYNEXT_PUBLIC_ONESIGNAL_APP_IDNEXT_PUBLIC_ONESIGNAL_API_KEY
- Install dependencies by running
yarn - Start the app
yarn dev