Build a real-time marketing application with Node.js and IBM Mobile Web Push

27 June 2014
PDF (457 KB)
Share:
Bob Balfe

Bob Balfe

Senior Technical Staff Member, North American Smarter Commerce Team, Industry Solutions

@BobBalfe

Sign up for IBM Bluemix
This cloud platform is stocked with free services, runtimes, and infrastructure to help you quickly build and deploy your next mobile or web application.

I wrote a blog post titled "Using IBM Mobile Web Push in single page web applications," where I discuss having a client-side framework for web and mobile applications that could react to marketing content coming from a marketing service. In this article, I am going to demonstrate how you can write a generic web page that can receive marketing content from the IBM Mobile Web Push server and display that content in the place I designate in the campaign manager.

As a software developer and solution architect on the Smarter Commerce team, I am always looking for ways to have a better marketing experience.

Ideally, I want a marketing platform that would allow me to "live" in the marketing tool and not worry about touching the end application.

I will demonstrate how you can build a basic Node.js application that uses IBM Mobile Web Push technology to push marketing content to the web application. This article will focus on a single-page web application and show how you can leverage IBM Mobile Web Push marketing content in that application. The blog post mentioned above defines the basis of this application and explains the concepts of using IBM Mobile Web Push in a real-time manner with mobile and web applications. The key takeaway is that you can use the campaign manager to push content to an application and tell the application how the content should be displayed.

Note: To fork the code for this exercise, click the EDIT CODE button in the upper right-hand corner (enter your DevOps Services credentials if you're not already logged in) and click the FORK button on the menu to create a new project. Alternatively, you can export the code by selecting the root folder (bobbalfe/NodeJSandWebPushExample), then selecting File > Export from the left navigation.

What you need to get started

 

The first thing you really need to understand is how to create Node.js applications and the development environment. It is best to get the application up and running locally before submitting to a cloud environment, and the Node.js tools are excellent for that.

  1. A text editor: I prefer Notepad++, but any editor will suffice.
  2. Node.js: Download Node.JS and install it locally.
  3. Jade: The Node template engine.
  4. Express Framework: This is a Node.js module you will install once Node.js is up and running.
  5. jQuery Core and UI: Download the base jQuery package and download the base jQuery UI package. This will make creating the UI much easier.
  6. Slidepanel plugin: This is an open source slide panel plugin for jQuery. Download the Slidepanel plugin and place it in your javascripts directory.
  7. API key: Register for the 30-day free trial of IBM Web Mobile Push. This gets you the API key to use in the application and gives you some time to play around with the push technology.

WATCH:Getting started with Node.js (demo)

The steps below describe the most basic approach. For more advanced tooling to speed your development, see Additional tooling considerations.

Step 1. Creating the base user interface

 

I am going to assume you have already installed Node.js and have it running locally. If you have not and would like to learn how to get Node.js up and running with a basic application, read Scot Rich's article "Build a sentiment analysis application with Node.js, Express, sentiment, and ntwitter." It will walk you through getting Node.js configured and running on your desktop.

In this step, we are going to get our UI configured to use the IBM Mobile Web Push APIs and the jQuery APIs working. Once your Hello World application is created, we will be working in the views directory and, more specifically, the layout.jade and index.jade files. Think of layout.jade as the base HTML file all of the views will be based on. This is where we will put our HTML header and reference the libraries we have downloaded:

doctype html
html
	head
		title= title
		link(rel='stylesheet',
                href='/stylesheets/style.css')
		link(rel='stylesheet',
                href='/stylesheets/jquery-ui-1.10.4.custom.min.css')
		link(rel='stylesheet',
                href='/stylesheets/jquery.slidepanel.css')
		script(src="/javascripts/jquery-1.11.0.min.js")
		script(src="/javascripts/jquery-ui-1.10.4.custom.min.js")
		script(src="/javascripts/jquery.slidepanel.js")
		script(src="/javascripts/presentation.js")
	body
	block content

Based on those definitions, you should get a clear picture as to where the JavaScript libraries you have downloaded should be placed. The next file will be the actual UI to your web application. For this demonstration application, I simply put a bunch of text on the page with links to drive interaction with the IBM Mobile Web Push server. I am not going to focus on my UI because the scope of this article is to show how you can use JavaScript to dynamically ask for marketing content from your marketing service.

The next part is to actually edit index.jade and put a UI on the page. For demonstration purposes, I created a field for the API key, but you might want to include this in your actual application definition as a property. In the file routes/index.js file, you can include properties to store the key.

exports.index = function(req, res){
  res.render('index',
                {
	title: 'IBM Push Demo',
	api_key:"XXXXXXXXXX-XXXXX-XXXXXXXX-XXXXXXXXXXXX"
	});
};

You can then reference that key in your layout.jade file:

Script( src="/javascripts/reactor-bundle.min.js", data-protocol="http:",
                    id="reactor-sdk",data-app-key="#{api_key}"
                data-auto-run="false"></script>

That approach is much more realistic to an actual application.

I used a series of anchor links that send page events to the campaign manager. You can imagine that these events could be from any UI gesture, like moving between screens in your single-page application. In my demonstration, I used a title tag on the anchor link to determine what event to send to my campaign manager:

a(href='#',pageOption="page",page="Title") Page Event 1 – Left

You will notice a couple things about this <a> statement. The first is the href is set to #, meaning we are not going to actually open a new window and that we are using this just for the event purposes. The pageOption will be used as a key in our jQuery selector statement to capture click events, and the page attribute will tell us what title to send to our marketing campaign for content. More on that in the next step.

Step 2. Instrumenting our call to the campaign manager

 

Now we are ready to make some calls to our campaign manager. I did this in an isolated JavaScript file named presentation.js in the public/javascripts directory. As you can see in the code below, I select pageOption so all my links on the page will call this one method. Since this is a single-page application, we need to tell the campaign manager what page we are on to get the appropriate content for the action. For this I will use custom attributes that I will key on in our campaign tool. I then create an event based on PAGE_VIEW, send the event to the server, and wait for a response.

$('[pageOption]').click(
                function(){
	Reactor.reset();
	Reactor.Client.attributes.set("title",
                "Reactor Test");
	Reactor.Client.attributes.set("page",
                    $(this).attr("page"));
				
	var newPage = new
                Reactor.Event("PAGE_VIEW", function(message){	});
	Reactor.EventManager.fireEvent(newPage);			
});

Step 3. Receiving content from the campaign

 

In the same file (presentation.js), we need to provide a callback for the campaign content. This is where we will determine how and where to display the content based on the data we receive from the campaign. First, let's understand what we will be receiving from the campaign. I have instrumented the campaign to send custom data via JSON. This allows me, as a campaign manager, to drive the display of the content (i.e., a pop-up message, left panel, top panel, bottom panel, right panel, or just a spot on the page). Following is a screenshot for the primary variable we will be using in this demonstration position.

Image shows custom data screenshot

Click to see larger image

But let's not get ahead of ourselves. We will learn more about the campaign side in the following step. First, we need to get the event scripted. We do this with a simple hook called onMessage. The message sent to our callback contains body, title, and customData (the JSON we put in the campaign manager).

Reactor.onMessage(function(message){
	if
                    (message.customData.position ==
                "popup"){
		var subjectDiv =
                document.getElementById("r_subject");
		subjectDiv.innerHTML =
                message.subject;
		var bodyDiv =
                document.getElementById("r_body");
		bodyDiv.innerHTML =
                message.body;
		jQuery("#reactor_response").dialog();
	}else{
		var mode =
                        (!message.customData.mode?"overlay":message.customData.mode);
		slider =
                $('[data-slidepanel]').slidepanel({
			orientation:
                    message.customData.position,
			mode:
                mode,
			static:
                true,
			html:
                    message.body
		});
	}
});

You can see we support popup and the four locations the Slidepanel plugin supports (top, bottom, left, right).

Step 4. Setting up your campaigns

 

Before you begin this step, you will need to register for your 30-day IBM Mobile Web Push trial. I hope by this point, between this article and the sample code, that your application is up and running and it is ready to receive content from our campaign. The first thing we need to do is create a new campaign and give it a relevant name. I will walk through the creation of one campaign and you should be able to figure out the rest. The first thing you fill in is the name of the campaign. This is going to be the administration name you will see in your campaign list, so make sure its relevant and easy to identify. You can optionally have a description of the campaign along with the start and end dates.

Image shows Getting started screen

Click to see larger image

Next, we define the content that will be sent to the client devices (mobile, web, etc.). You can have a subject and a body that supports rich text. Ideally, this is where you would push rich content like graphics, banners, advertisements, or product recommendations. You will also notice that this is where I use the custom data. This allows me, as a marketing person, to identify how content should be displayed on the device. One thing to keep in mind is that this could also be used to identify a key for an ID in a DIV or place on the page. So if I designed my site with areas for marketing messages and standardize on placement IDs, the content would be placed in those spots — which is probably a more typical implementation, especially if you have multiple places you want to control from the campaign tool.

You will notice in this example I pass in {"position":"left","mode":"push"}, which tells my client-side framework to display the content in the left panel and to push the page content to the right.

Image shows message content screen

We will keep the audience block as All Users and move on to the triggers and rules section. Now, I could have created a custom event, which is probably more realistic. But instead I just used the PAGE_VIEW event. In the Display Rule Builder section, I simply identify the user attribute page as exactly Title. This now ties the page event to the rule in the campaign, so when I click the <a> on the page, and it sends the page=Title this campaign will send back its content.

It is important to remember that your client could receive more than one piece of content from the campaign manager. I set my campaigns up so that would never happen, but you could get really creative with this. Think of a side-scroller widget with content being driven from the marketing manager.

Image shows Display Rule Builder screen

Additional tooling considerations

 

In Step 1, I showed how you can use the node and npm commands to manage and run the application. You can easily do all of the coding with a text editor. However, in developing the app, I actually used a couple of other tools to ease my development.

Also, I ultimately wanted to push the app to a Cloud Foundry-compatible Node.js runtime environment, such as CloudFoundry.com or the IBM Bluemix™ platform. So the final app includes a few extra files required for that environment; the manifest.yml file describes the app and its resource needs the Cloud Foundry runtime.

Conclusion

 

Now that you are familiar with Node.js and the IBM Mobile Web Push APIs, you should be ready to implement some nice real-world use cases for this technology. I am still relatively new to Node.js and the Express framework, and I am already seeing other possible applications that could be built from this combination.

Add a comment

Note: HTML elements are not supported within comments.


1000 characters left

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Mobile development, Cloud computing
ArticleID=962737
ArticleTitle=Build a real-time marketing application with Node.js and IBM Mobile Web Push
publish-date=06272014