lab – building your site with ibm digital experience

IBM

Contents

Lab – Building your Site with IBM Digital Experience

Author: Herbert Hilhorst – [email protected]

mailto:[email protected]

IBM


TABLE OF CONTENTS

Table of Contents TABLE OF CONTENTS ............................................................................................................................... 2

OVERVIEW .................................................................................................................................................. 3

Lab Handout ................................................................................................................................................... 5

Step 1 Discover CTC Demo Conference demonstration site.................................................................. 5

Step 2 Create a new Tourist Site ........................................................................................................... 10

Step 3 Modify your Site Logo .............................................................................................................. 18

Step 4 Add and Update your New Party Events Page .......................................................................... 21

Step 5 Create, test and analyze results for a Registration Form ........................................................... 43

Step 6 Personalization and Multi-channel Access ................................................................................ 64

Step 7 Application Integration .............................................................................................................. 74

Step 8 Analytics Integration.................................................................................................................. 81

CONCLUSION ............................................................................................................................................ 86

RESOURCES ............................................................................................................................................... 87

Appendix A Setting up the Digital Experience environment.................................................................. 88

Appendix B More Application Integration examples ............................................................................. 89

Appendix C Notices ................................................................................................................................ 93

Appendix D Trademarks and copyrights ................................................................................................ 95

IBM


OVERVIEW This hands-on lab guides you through building a fully-functional multi-channel Internet web site on IBM's Digital

Experience platform. You will experience how easy-to-use and powerful IBM’s Digital Experience platform is

today. You will also learn more about some of the many powerful integration, personalization and analytics

capabilities.

In the appendixes, you will learn more details on to set up this platform to allow you to do this lab and to discover

more integration examples.

In this business user lab, you play the role of Frank Adams, a Marketing Manager in the fictitious Tourist

Department of the fictitious Digital Island. Your task is to create a new Web site to promote tourism in the Digital

Island. You will first explore the CTC Demo Internet Conference site, a demonstration site which is available with

IBM's Digital Experience platform, to gain some familiarity with important concepts. Then, you will be guided

through the task of building and configure a complete new multi-channel Internet Tourist web site, which

automatically optimizes itself for display on desktop and mobile browsers. These are the steps you will follow:

(1) Explore the demonstration site

(2) Create a new Tourist site

(3) Change the logo

(4) Add a Party Events Page, Component and Web Content

(5) Build an Event Registration Form, add it to the site and analyze its feedback

(6) Add and Preview Personalized Multi-Channel Content

(7) Discover an Integrated Application

(8) Use integrated Analytics capabilities to review the effectiveness of your site

This shows the site structure you will build.

IBM


And this is how your Island Party page may look like on different devices.

In the lab, you are using IBM Digital Experience 8.5. A public IBM Digital Experience service is running in the

Cloud (Softlayer) consuming shared IBM cloud based services (key capabilities of WebSphere Portal, Web Content

Manager, Forms Experience Builder, and also Business Process Manager, Commerce, Connections, MobileFirst,

Interact, Xtify, Digital Analytics, etc.).

You will be using the following user ID and password throughout lab

Purpose User Password Marketing Manager fadams passw0rd

You can user helper files to simplify running this lab. These should be in the same place as where your downloaded

this lab.

IBM


Lab Handout

Step 1 Discover CTC Demo Conference demonstration site

In this section you will discover some of the functionality of the CTC Demo Conference demonstration site and

how to navigate the site.

__1. Open your brower (we tested this with Firefox) and connect to http://ctcrocks.ibmcollabcloud.com/. This

brings you directly to the home page of the CTC Demo Conference demonstration site. The home page,

based on a landing page template, shows a promotions carousel component with some built-in pagination

controls. It also displays information from other places in the site. For example, the Design and Developer

Track information is from the Design and Developer Track page under the Program option in the navigation

menu. The Experience Blog is from the Blog page and shows this in a different layout again. Below the blog

information, you can see the conference sponsors. In the navigation you can click through to these pages. The

home page also has links to an additional Blog, Location, Contact and Registration pages. Most of this

functionality is achieved with some pre-configured components that are provided as part a rich catalog of

assets you can use to accelerate building your own sites on IBM's Digital Experience platform.

__2. Take a look at the pagination controls on the promotion carousel component. These allow you to quickly

view the available promotions. Click on a number to view the corresponding promotion, or click the forward

or back arrows to view the next or previous promotions. Note that the carousel will advance to the next

promotion automatically after a short period of time, looping through the configured promotions.

__3. Click on the second promotion image for Deliver engaging experiences that respond dynamically and

intelligently to the user, their context and their devices.

http://ctcrocks.ibmcollabcloud.com/

IBM


__4. More details on this track are displayed. From the built-in breadcrumbs in the navigation area, you can see it

is an event under the Program – Development Track. The full session description is displayed in the main

column on the left, while event details and contact and social sharing information are displayed in smaller

areas on the right.

__5. Under the Connect menu, you find options to share this information with Facebook and Twitter. If you have

those accounts, you may select one of the options to share. For example, if you click on Tweet, you will be

prompted to share this link with Twitter (you may need to be logged in to Twitter first).

IBM


__6. Now click on the Development Track link to see all the sessions in the Development track. Each session

has been created using a page template, which allows common information common to each session, to be

pre-populated, saving time.

__7. Notice the session you just looked at – Engineering a Customer Experience Management solution – appears

with a different look and feel in a list. Tip: If you don't see any content in the list, you may need to select an

older date in the From field e.g. 1/1/14.

__8. Now go the Registration page. Click on Registration.

IBM


__9. The Registration page shows frequently asked questions about the conference. The FAQ Index/Detail

template is used to create this page. To see the answer to a question, just click on the question text. For

example, clicking 1. What is the refund policy? displays the following:

__10. Click the question text again to hide the answer and display just the list of FAQs.

__11. This demonstration site is multilingual, meaning you may change the preferred language of your web

browser to Spanish, German, Chinese or Arabic - you will notice that the whole site is available in these

languages. To display the site in another language, change the content language of your browser. In Firefox,

you can use Tools – Options (or Edit – Preferences) – Content – Choose your preferred langue for

displaying pages moved to the top, as shown (you may need to add another language first):

IBM


__12. Then you will see the same site displayed in the chosen language.

__13. Be sure to switch your preferred browser language back to English before proceeding to the next step.

This was a quick introduction to the CTC Demo demonstration conference site available with IBM's Digital

Experience platform. Now you will make your own site.

IBM


Step 2 Create a new Tourist Site

In this section, you will discover how easy it is to build a complete new Tourist site using IBM's Digital Experience

platform. To be able to make any changes, the site is configured to work with specific authors only.

__1. Anonymous users are not allowed to make any site changes in this configuration, so you will first need to log

in as a user with sufficient authority. You will log in as Frank Adams, with user name fadams. Click on the

Log In link at the top of the page.

__2. Then log in with User ID fadams and password passw0rd (with a zero).

__3. Notice that you now have access to much more information and options. This is thanks to the many

personalization features of the platform, which can tailor what you see based on knowledge about who you

are logged in as, among other attributes. Navigate to the Site Builder page.

IBM


__4. The Site Builder lets you quickly roll out new websites, or add new sections to existing websites, using Site

Templates and Section Templates. After you create a site with Site Builder, you can customize it further as

needed. Several Site Templates are provided to allow you to quickly make progress with building an internet

or intranet site. You can also easily create new Site and Section Templates.

__5. Templates are available to create new empty sites from scratch or with ready to use content. They are based

on best practices, and can be updated, duplicated and exported to other environments, to adapt to your

needs. Since you need to build a tourist site in this task, scroll down to the Tourist Portal template entry and

click the Launch Site Wizard next to it, as shown here. If you wish to create a different site, eg Hospital,

Insurance, Store, Bank, etc. feel free to try this later. Most instructions would apply similarly, using different

content.

IBM


__6. This launches a wizard to step you through providing information about the new site. Note that help is

available for each entry. Click on “?” to display help information. Default information is pre-populated in the

wizard to save you time. Change the default “Unique site name”, “Site title” and “Friendly URL name” to

something memorable to you (in our case we are creating a Tourist Portal for our Island and used “My

Island’. You should use something else, as you creating this on a shared environment.). The friendly URL

will appear in your URL address. Then proceed to the next step by clicking the forward arrow “>”.

__7. Each site stores its data in a Content Library. You can choose if you wish to use a new content library or

share an existing one. As you are creating a complete new site with your own content, you should create a

new content library. Give it a unique name and description, and click the forward arrow “>”.

IBM


__8. In this last step, a list of pages which will be included in your site is displayed. These pages were pre-

populated based on the site template you chose earlier. You can easily deselect any pages you will not need

in your new site.

__9. Edit the landing home page My Island now. Click Edit as shown.

IBM


__10. It shows that this page takes the configuration information you provided earlier. The page title, URL and

unique name could be modified here. It also shows from where it will copy its new content from. The page

itself is based on a specific page template. You will learn more on this later. Click Cancel.

__11. Click Advanced Settings to explore other ways to customize your site before it is created.

IBM


__12. On the Site Experience panel, you can select a “Portal theme” (the graphical layout of your site), the

“Profile” (indicating what options are available to site users) and the “Style” (color settings). Leave the

theme and profile as-is, but choose a style that suits you. Under “Access Control” you can set up your site

users and administrators. Click Create Site.

__13. You then get a summary of your new site. Now click → OK, to create it.

IBM


__14. The site gets created in the background. Be patient, as a complete new internet site with all pages of content

is now being created for you automatically.

__15. After a short while, your site should be ready for further customization. Click the Go to Site to open it.

__16. Your new site is now published and available for use.

IBM


__17. It is also available under the site menu (maybe further down as shown here), in case you need to come back

to it later. Bookmark it now for future usage!

You have successfully created your first site and are now ready to further customize it.

IBM


__4. Then Upload yours. Notice you can have specific logos for the Desktop, Tablet and Smartphone. Select

Upload and feel free to use any image that you want (if you want, there are some images available on

Desktop/Digital Experience Labs/Helper Files/User Tour: MyIslandDesktopLogo150x86.png,

MyIslandSmartPhoneLogo115x35.png and MyIslandTabletLogo150x86.png). For Desktop Logo:

__5. For the Smartphone Logo

__6. And finally the Tablet Logo:

IBM


__7. After you upload the 3 logos, scroll down and click Save and Close.

__8. Switch back to View Mode. Now you should see your customized Tourist Portal site.

__9. In another section of this lab, you will test the logo on the Smartphone and Tablet. However, feel free to log

in your portal server using your smartphone or tablet with the same URL as your desktop.

You have successfully customized your site logo.

IBM


Step 4 Add and Update your New Party Events Page

You will first have a quick look at this new site and then add a new page to manage “Party Events” in your Island,

under the existing → Events page.

First have a look at the home page of your new site, which is based on one of the many out of the box page

templates: the landing home page template. Below the top banner, you will find a set of additional portlets with

content, such as a news list “What’s on in Digital Island”, tour promotions call-outs “Recommended Tours”, an

online service carousel “Planning your trip” and a “Picture of the week” section at the bottom.

IBM


IBM


__3. The Events page is based on a “Landing Navigation Page” template. Switch to Edit Mode to see that there

are three Web Content Viewer portlets with each different content. Ignore the IBM Interact Spot portlet

below which we are not using now.

IBM


__4. In your new site, you can either make changes that are published directly, or coordinate multiple changes to

the site jointly with your team, using “projects”. You can also use draft content, decide whether site changes

should be subject to workflow, preview how the changes will look to different audiences, and finally

schedule the site updates to be published at a specific time in the future. You will now create a new project to

manage your changes to the site. Under → “Published Site”, select New Project.

__5. Name your project, like My Island V1.1 (or any name you want) and click Create.

__6. You should see a message confirming the new project was successfully created. In the top toolbar you should

now see this project name. The Projects panel provides information about each project and gives you options

to manage your projects. Optionally, select More to see additional project options. The project is initially

empty and all elements you will be creating now will appear under the Contents section.

IBM


__7. You will now create a new page and make updates there. First switch to the Create tab.

__8. Notice the wide variety of page templates you can choose from. Next, enter the text Digital Event in the

search dialog to search for our specific Events template. Select Digital Event from the search results. Notice

you can preview the page template and view additional details. Name your new page “Party Events” and

change the friendly URL to remove the space from that which was generated automatically for you. Keep the

default page insertion point → Last child of current page and click Create Page.

__9. This will create two pages, an index and corresponding details page based on this template. Both are

configured with a specific layout and pre-defined portlets with ready to use components and content to start

with. Select View or edit page information to see more details on the draft index page you created.

IBM


__10. This shows you the general basic information about this page which you could directly edit. It also has the

actions to publish it (as it is in draft now) and delete it. On the left you also have direct access to the page

Layout, Style and Vanity URLs. Click on Details.

__11. This shows some more details on your page, like the project, theme and profile used. Now edit the → “Page

Properties”.

IBM


__12. Explore the → Manage Page Properties options. Take a look at the General, Cache (single user/across

users and interval), Security (with author and owner selection as well as workflow settings for this page),

Localization (for page title translations) and Advanced (with theme and profile selections, allowed portlets

control, page versions and more). Click → Cancel or close the window to exit without making any changes.

IBM


__13. Next click Layout. These are out-of-the-box layouts you can select from. Notice the current layout is

highlighted, and information is provided about what page elements would be hidden if you changed to a

different layout with less columns/rows.

__14. Next select Style. These are default styles you can choose from to control the look and feel of your page. It is

possible to define your own custom styles to match your corporate branding.

__15. Finally, you can assign specific short “Vanity URLs” to your page. Type a unique short/vanity URL name

(remember this is on a shared environment), eg. PartyEvents in the Vanity URL Name and click Save. This

will allow users to access your page directly using a memorable URL, such as

http://www.myisland.com/PartyEvents.

IBM


__16. Your page should now be correctly configured. Now click on Projects to see what elements have been

created for your page.

__17. You see here that not only the Party Event page is created, but also several additional elements defined by

the page template. For example in the Party Events page, you will see an Events, Events Index and two

Event contents (Event 1 and Event 2), while in a hidden child page Events Details, you will find an Event

Details Banner, Socialize Tools and Subscribe Tools portlets. This allows you to go directly to each

content. For example, if you wish to open the draft Party Events page the next day after a logout or your

session expires, log in and select the project again, find the item you wish to edit, select its menu and click

Edit. Here it shows how to edit the Party Events page. Now close the toolbar as shown with .

IBM


__18. Your page is now ready to be populated with relevant content and still in draft state. You see the Party

Events page with the two contents “Events”, appearing partly in two content portlets, and the “Events Index”

which shows the two Events sample content.

IBM


__19. Now you will change the headline of this section to Party Events. As you can see, in the edit mode it’s like

working in WYSIWYG, and therefore easy to learn. You are guided in configuring the contents of the page.

Click inside the headline and change it to PARTY EVENTS.

__20. You can do the same with the Banner Image. Click inside the image and click Upload to select from your

Desktop/Digital Experience Labs/Helper Files/User Tour: PartyEventHeadline1280x688.jpg or other

photo of the indicated size. Hint, you may use free image banks, like http://morguefile.com to find good

materials. Click Renditions to notice you can select multiple renditions for the Desktop, Tablet and

Smartphone. Use it now for all the devices, as they will adapt themselves automatically. Click Save.

http://morguefile.com/

IBM


__21. You may need to refresh your page (F5) to see the change made. Then change the subheading. If you want to

undo your change, just hit the escape key to quite the field.

__22. Parts of this content are also used in other places, but not in this page. These are hidden fields. Designers

control what parts may be managed in this page. There is a hidden field section that you need to show first.

Click on Display (which becomes a Hide link) and notice the additional fields.

IBM


__23. This information will be shown, for example, in the part Event page. Update the Title and Summary and

insert an Index Image, you can select from your Desktop/Digital Experience Labs/Helper Files/User

Tour: IslandParty360x225.jpg.

__24. Your hidden fields may look like this.

IBM


__25. Then change the Body rich text field. You may have a short look at all the additional capabilities you have to

manage the content. Enter “Come and see these interesting Party events in our Island” and size it 20, as

shown.

__26. The portlet below shows an index of several events. Click on Event 1 to see it in more detail on a dedicated

hidden Events Details page that has more space to show the individual events.

IBM


__27. This page show the Event Details Banner, Subscribe and Social content you saw earlier in the project, again

all created from the page template. This page layout is used to show all the events individually.

IBM


__28. Change the Events Details Banner image. Click on the image, then Upload and select from Desktop/Digital

Experience Labs/Helper Files/User Tour: EventDetailsBanner1288x150.jpg. Click Save. Remember you

may need to refresh the page to show.

__29. Now modify the additional hidden fields that will show on the Events page. Click on Display of the Non-

displaying field.

IBM


__30. You may make changes to any of these elements.

__31. Now you will create a new event. Your designers have decided that these should be created from the Event

index page, so you need to go back. Click on breadcrump PartyEvent.

__32. Here you see the action to create a new event. This is all under control of the developers in your team. Click

on Create an Event Content. Name your new event, eg. Island Party

IBM


__33. Now you are ready to provide details on your new event. Enter some relevant data in the location, start

and end date field, a summary “This will be the biggest party of the year ! You do not want to miss

it!” and announce in the body that you should be registered “Come to this new party !!! Register to get

your attendance pass.”. You may also set the hidden Index Image using Desktop/Digital Experience

Labs/Helper Files/User Tour: IslandParty360x225.jpg. The end result could be as follows:

IBM


__34. If you are ready with editing, you may want to publish the page. This is done under the Content Menu –

Publish option. You can see it is draft now. Click Publish.

__35. Depending on the workflow it may need to be approved first. Notice that the status of your item has now

changed to publish pending, as it is part of the project yor are editing and will be published once the full

project is published.

__36. Now go back to the Party Events index page again to see the new event appear in the index. Click on

PartyEvents.

IBM


__37. You can see that your new event has been added automatically to the events index, now using the summary

and image you just added.

__38. As a business user you can change the appearance of this list. Your designer decides how this can be done.

The options may appear as additional hidden values. In this case they want you to configure it as follows.

Click on the Display Content Menu and then Open Edit Form.

IBM


__39. Here you see all the details on your index content. It shows for example the List Component used to select

the right list items and a specific List Presentation Component used to define how this list should display.

You will change this from 3 Columns List Design with 9 per page to 3 Columns Carousel. Click Select

Component.

__40. Now select the → “3 Columns Carousel” and click → “OK”.

__41. Scroll down (notice other configuration options) and click Save and Close.

IBM


__42. And you will see that your list now shows differently.

You have successfully created additional Digital Event pages with specific content and components.

IBM


Step 5 Create, test and analyze results for a Registration Form

In this section, you will create and add an event registration form to your event details page. A Forms Experience

Portlet provides business users access to an easy tool to create and manage dynamic forms. Once configured, you

will test the form and go to the backoffice to review its responses.

__1. First you will add a Forms Experience Builder portlet to the event details page. Select the Found out

more link on your new Island Party event to go to this page.

__2. Then click Create in the toolbar and select Applications from the left navigation area. Type forms as the

search string in the search box and observe search results. You should see Forms Experience Portlet

application name listed in the returned results. Click on the + sign to add the Forms Experience Portlet

to your page or select it and drag and drop it directly to the right place (above the Subscribe portlet).

IBM


__3. Now you are ready to configure it. Select the portlet option Edit Shared Settings. Notice the other

options, like Site Promotions and Analytics Tags that are to increase visibility, and Manage Endpoints,

used to make portlets communicate to each other.

__4. Click Browse Applications to select and of the ready to use forms.

IBM


__5. As you can see, many forms are ready to reuse and after this lab, you may take a closer look at them. You

are now going to create a new one. Therefore click Manage Applications.

__6. Then click New Application.

IBM


__7. Then enter a unique application name (remember this is on a shared environment – you may prefix the

name with the shortname of your site), eg. Event Registration and optional description. Then click

Create.

__8. This brings you to the form editor. First drag and drop a Text element to the first row.

IBM


__9. Then enter the heading text Event Registration and select the text to choose the size large. Then click: →

OK

__10. Below it, drag and drop a Single Line Entry.

__11. Change its description by First Name.

IBM


__12. Duplicate this item.

__13. Rename it to Last Name.

__14. Now add a row below the table. Click on the last row and you can select table options. Select Append

Row (last).

IBM


__15. Now drag and drop an e-mail field below. You may also drag it just below the previous row and it will

create a new row for you automatically.

__16. Add a row again and drag and drop a Select Many field.

__17. Each of these fields can be configured in more details. Change the name of the Select Many to Select

Event and then click Edit Selection Properties.

IBM


__18. In the basic tab you can set the select options. Change the first one to Party Event and click Add Option.

__19. Now add another event options, like Event 1. Notice you have additional tabs to better control this field.

For example, you could calculate the options of this field automatically. Now click OK.

IBM


__20. If the visitor is selecting Party Event, you want him/her to provide any suggestions for it. Therefore add a

row again and drag and drop a Multi-Line Entry on it.

__21. Change its description, eg. to Any suggestions for the party event and then click Edit Rules as shown.

__22. Click Add Rule.

IBM


__23. Enter the rule name Only for part event, change the action to Show, change the condition to Select

Event and select Party Event as shown. Then click Apply and Close:

__24. As you are only using the first column, delete the second. Click on below the table and then Delete

Column.

__25. You may also make the column a bit smaller. Click on the corner and drag it to the left to reduce the size.

IBM


__26. Finally, configure your form to show a confirmation of your submission in a dialog and then clear the

form. Edit the Form Properties.

__27. Then click Advanced and select the option Show the success message in a dialog and then display a

new form. Then click OK.

__28. To change the message itself, click on Stages.

__29. Here you manage multistage workflows. Below click the Edit Action Properties.

IBM


__30. You may change the message and perform activities, like sending an email to a specific person or group.

Change the description only, eg to Thank you for your registration. We will get in contact with you

shortly ! and click OK.

__31. Now Save it first and then click on Manage.

__32. Find your new Event Registration form and click Deploy so you can use it.

IBM


__33. Leave the deployment options and click Start.

__34. Now you have options to launch it standalone and see any responses to it. Close the window.

IBM


__35. You are back in the applications browser. Select your new Event Registration form and click OK to save

the settings (you may need the Next and Previous actions to find it).

__36. Then select OK again.

IBM


__37. Then fill out the Event Registration form. Notice that the additional Any suggestions for the party event

field only appears when you select the Party Event. Click Submit.

IBM


__38. You get a confirmation of successful submission. Click OK to get back to the page.

__39. Submit at least one more form using different names and options.

__40. Now you will review the responses. Select Edit Shared Settings again.

__41. Click Browse Applications.

IBM


__42. Click Manage Applications.

__43. Note : if you wish, you may open the Forms administration interface directly in a dedicated browser

window. This is typically the current host (if it is installed on the same server) with /forms, eg.:

http://ctcrocks.ibmcollabcloud.com/forms. This opens the same content as normally using the Manage

Applications directly in the FEB portlet. You may also use CTRL + and CRTL – to control the size of

your browser screen.

Look for the Event Registration in the list of forms, click on it to expand. This shows the direct URL you

may use and insert in a portlet to have easy access (in this case you would need to change localhost in the

URL below with ctcrocks.ibmcollabcloud.com). Then click View Responses to see the submitted data.

__44. This opens a new page with a list of all the responses. You can select any of them to see its details. This

analysis information can also be included directly on a page, dedicated to the registration responsible. You

can also access this data using REST API in other applications and you can simply export it. Click on

Export Data and you see the formats supported. Click Cancel to go back.

http://labconnections.ibmcollabcloud.com/forms

IBM


__45. Now click on Summary.

__46. This shows the summary page of all responses. You can customize it, create filters and share it. Click on

Customize. This allows you to select only a few items (if your form had more). Click Cancel.

__47. Optionally have a closer look to the Create Filters and Share options as well. Close this window to come

page to your Event Details page and close that window too.

IBM


__48. Now you want to publish your changes so they are visible on the live site for all visitors to see. If you

want, you could preview how it will look for specific and anonymous users, by using one of the preview

options in the Menu as shown.

__49. In the interest of time, you will publish the project with all its current items as-is. Click on the Toolbar

icon, shown below. If you do not see it, click the and/or to make it appear again.

__50. Then click Projects. You will see your current project with all items that are part of it and that were

created earlier. It also shows each item's corresponding workflow status. Click Manage Project.

IBM


__51. You want to approve all items now. Normally, you would select each item in the above bar, review it and

approve it individually. However, for this exercise, you will approve all changes at once. Select to display

all 50 items per page first, so you can select all items of this project.

__52. Then select the all items check box, select More and Approve.

IBM


__53. Click Publish Project to publish all approved items now.

__54. Now all your changes are visible in the live site, shown as Published Site.

You now have successfully created and published a new version of your Internet site where you added the IT

Events page with your content, components and form.

IBM


Step 6 Personalization and Multi-channel Access

In this step, you will see how you can take advantage of personalization capabilities to deliver tailored experiences

to different audiences, how the web page adapts itself automatically to different devices with its inbuilt

multichannel functionality and use the built-in mobile preview.

__1. First you will create a new piece of rich text web content that will be configured to show different content

depending on the device being used to access the site. If a SmartPhone or Tablet visits your site, that user

will be prompted to download your mobile application in the app store. This time, you will make changes

directly on the live site, rather than via a project. Ensure you are still on the Island Party Events page.

Click on to switch to authoring. Then switch to Edit Mode, then using the Toolbar, Create -

Content – Web Content. Notice that from here you can also easily add Business Process Management

(BPM), Social, Commerce and more content to your page.

IBM


__2. Available teaser content is displayed. Add the Teaser content, by clicking the + icon or drag and drop it

directly below the banner.

__3. Now click in the text area of the Teaser that you just added, and type a message that will be visible only to

mobile visitors, such as “Download our latest Mobile application now from the app store! Click this link

to download.”. Feel free to change the style, size and add images.

IBM


__4. Next you configure this content spot to hide the message from desktop visitors. Click Configure Spot.

__5. Change the configuration of the spot from Specified Content to Targeted Content and the click Hide

Spot.

__6. Then use Add Segment to add the desktop users.

__7. Click Add next to the Desktop User to add it to hide it from Desktop Users. Click Done.

IBM


__8. This should show as follows. Click Done again.

__9. You will see the summary of your new configuration. Change the Appearance setting, and be sure that it

is set to → Default. You can apply this to any content and with any segments configured in your

environment. Click Save.

IBM


__10. As expected the content is now hidden, as you are working on a desktop device. Notice you can always

show it again easily, if you need to update it.

__11. Now switch back to View Mode (click the ON slider in the toolbar). Your new mobile content is now not

showing. Diminish little by little the width of your browser to show that your page adapts itself

automatically to it.

IBM


__12. Watch carefully how images, texts and finally columns change to optimize it to your screen size.

IBM


__13. And if you access the same site with specific mobile phones, it further adapts it. To test this, you may use

the open the same URL with your tablet and/or SmartPhone. You may also use the built-in Mobile

Preview option. If you do not wish to test this, as it requires as plugin, go to step 22. Otherwise, scroll

down and click Mobile Preview.

__14. This opens a new window with the Mobile Browser Simulator with by default an iPhone 5 as smartphone

device. If you haven't done yet, you need to enable the Useragent switching to simulate the selected

devices correctly once. If you have already done this, you can directly go to step 19. Ensure you are not

using other user agent plugins. Select Enable Useragent Switching.

__15. This opens the installer. If you are in Firefox, you need to open the browser extension in a new Window.

Right click on Install Browser Extension and then Open Link in New Window. On other browsers, this

may be slightly different.

IBM


__16. The click on Allow.

__17. Then Install Now.

__18. And finally Restart Now.

IBM


__19. It now shows your mobile targeted content again, as the server recognizes the device that is used. It also

has changed the whole navigation, so with “thick” fingers you can still navigate easily. There are different

options available, such as showing the QR code of your current page to read it with an external device and

rotate it.

__20. You can easily test with other devices as well. Click Add Device and choose any of the preconfigured

devices, eg. iOS – iPad – Apple iPad 4.

IBM


__21. Open the QR and notice the QR bar. You may scan this QRCode with your tablet or Smartphone to see it

loads the right URL and shows your site correctly on that device.

__22. Close this window to get back to the desktop view.

In addition to this integrated mobile preview, it is possible to embed the personalized content within mobile

applications on one or multiple app stores (eg. iPhone, Android), using MobileFirst. This allows you to have

flexible ways of using the web site, and keeping everything centrally managed.

IBM


Step 7 Application Integration

A key functionality of the IBM Digital Experience is the possibility to integrate different applications and make

them work together.

In this step you will be discovering one our integration tools, the Script Portlet which allows you to build very fast

dynamic portlets that can communicate with each other and other portlets, using simple HTML, JavaScript and CSS

skills. It is part of an extensive list of development tools and out of the box portlets that gives you a fast start for

your digital experience implementation.

__1. First navigate to the Be Prepared page which has been created with the site template as well.

__2. Scroll down and click on the Hotels Finder to open its corresponding page.

IBM


__3. This page shows a list of hotels on Google Maps and allows a visitor to select any of them to get more

details in the same portlet and to send the hotel information to other portlets (Hotel Details) on the

same or different page. Now click on any of the hotels.

IBM


__4. And you see the hotel details are shown in the same portlet and the hotel information is sent directly to a

details portlet to show hotel rating analysis and services information.

IBM


__5. These are portlets created using the Script Portlet. The Hotels Map Cooperative Script Portlet creates a

list based on a data set of hotels. These can be obtained from external applications directly, or using

specific web services that could be generated for example by IBM Web Experience Factory. Switch to

Edit Mode and have a look at how this is working.

http://www-03.ibm.com/software/products/en/ibmwebexpefact

IBM


__6. You can see that both portlets are Script Portlet Content Items and can be edited. Click Edit on the Hotels

Map Cooperative Script Portlet.

IBM


__7. This opens up the Script Portlet editor. It shows your content, a place to edit and preview pane (which

allows to preview in a dedicated window or enlarged one). As you can notice, it's all based on standard

HTML, CSS and JavaScript and can be created and modified by many people.

IBM


__8. If you wish, feel free to look around and make some changes. You may also use your favorite design tools

to build these Script Portlets. Under the Actions menu, you will have access to functions to manage render

parameters, which allow to share data between different portlets. It also allows your end users to set any

portlet preferences that you may use in the script. And you can export it to use in other environments.

Click Save to see your changes in the preview pane. When done, close the editor.

__9. Close the Script Portlet editor, then switch to View Mode.

If you are interested in more Script Portlet examples, as well as other integration examples with IBM Connections,

Forms Experience Builder and combinations of different applications (e.g. Connections and Forms Experience

Builder under the Opportunities) pages, you may have a look at Appendix B.

Providing business pages with applications and content coming from many different places, nicely integrated, with

a same look and feel and personalized, allowing your business users to get their work done easier and faster is the

typical way of using our Digital Experience. As a business user, all information you need to make the right

decisions are put together in a simple user interface, can be acted on and updated easily and are accessible in your

preferred device.

Another good example, you may want to look at is the recorded demo of a marketing manager of Greenwell

Internet who needs to promote kid bikes and brings together rich content, such as photos, videos, social forums

coming from Connections, Commerce products, etc.: https://www.youtube.com/watch?v=Idrueug10wQ.

You have successfully discovered the integrated applications. IBM's Digital Experience has many development and

integration tools to integrate your applications into your sites fast and easy.

https://www.youtube.com/watch?v=Idrueug10wQ

IBM


Step 8 Analytics Integration

In this last section, you will learn how to your web site is being used, using the analytics integration. This allows

you to understand how many people are visiting your site and its tendency. You will see that you can easily create

site promotions and additional analytics tags to closely track your site.

__1. All analytics tools are actually implemented on the CTC Demo site. Go to this site first. Click the

Site Menu and then CTC Demo.

__2. Then click Actions – Site Promotions.

IBM


__3. This allows you to put your content, pages, portlets, etc. to a specific promotion, part of your

marketing campaign, and follow this in your analytics tool. A Site Promotion is part of a

marketing campaign that has the objective to introduce a new product, service, or event, or better

position an existing one. A marketing campaign can consist of mailings, posters, banners, articles,

games or other web content. In our solution, a Site Promotion covers the web content part of the

marketing campaign. For example, a site promotion named “Digital Island Promotion 2016” can

reference pictures, blogs, and gift-shops on a web site. Click Done to close.

__4. Now select Actions – Analytics Tags.

IBM


__5. Notice the interface allowing you to manually add more tags to your page. You can obtain specific

analytics information from your site by using these analytics tags for your site resources. You

might want to know which types of users visit your site most frequently, for example by age group

or other characteristics. If you want to address mostly business travelers, you can create an

analytics tag “targetAudience:BusinessTravelers”; you can then associate the tag with all

resources that contain content for this target user group. By looking at the visits on these pages

you can determine whether the main user group of your site are indeed business travelers and what

you may want to do to improve their visits. You may see some other existing tags as well. Click

Done to exit.

IBM


__6. The same functionality is available for each portlet. For example in your CRM Customer List portlet,

you can access to it dedicated site promotions and analytics tags.

__7. Finally, have a look at the overlay reports. This works if you use and have IBM Digital Analytics (ex.

Coremetrics) configured to analyze your data. You can select to have them for your page and

individual portlets. Select Actions – Show Portlet Reports to get the information for each portlet.

IBM


__8. Now click on Details of the Promotions Slideshow portlet.

__9. This brings you to the IBM Digital Analytics web site where you can further analyze your data you

provided and use that to further optimize your site. You need a client ID to manage this. If you are

interested in learning more on this or any other topic, feel free to contact your IBM contact person.

IBM


__10. Finally, if you are interested you may check the page report as well, which gives you something like:

You have successfully discovered the integrated analytics options.

CONCLUSION You have now seen that in little time, you can build your own customized multichannel intranet and internet web

sites.

In this lab you have discovered the CTC Demo conference site, learned how to build a complete new web site using

site templates, add and update new pages, portlets, components and content. Specially, you learned how to

customize forms and analyze the user input.

Often changes to a website will be made by several users including business users, administrators and designers.

Once all the changes have been made, previewed and approved, a final approval for all the changes can be made so

that all the changes are published to the production site. Again, a Project can be used to prepare these changes and

publish them at the right moment.

You also discovered how different applications can be easily created based on applications, components, forms,

content that may communicate to each other and are adapting itself to different devices with its personalization and

multichannel support, and integrated analytics.

You have successfully completed this lab and your site is ready for reuse. Feel free to use different site, page and

content templates and add your own applications and content to extend your site and/or build new ones! You may

also go to Appendix B to learn more about integration examples.

IBM


RESOURCES

IBM Portal Family Wiki: http://www.lotus.com/ldd/portalwiki.nsf

IBM Portal and Lotus Web Content Management product documentation: http://www.ibm.com/developerworks/websphere/zones/portal/proddoc.html#v61infocenters

DeveloperWorks Portal Zone: http://www.ibm.com/developerworks/websphere/zones/portal/

http://www.lotus.com/ldd/portalwiki.nsf

http://www.ibm.com/developerworks/websphere/zones/portal/proddoc.html#v61infocenters

http://www.ibm.com/developerworks/websphere/zones/portal/

Contents

Appendix A Setting up the Digital Experience environment

This appendix explains how to set up your IBM Digital Experience installation to be able to run this lab

yourself.

It assumes that the different parts for IBM Digital Experience, IBM WebSphere Portal, IBM Web Content

Manager (WCM), IBM Forms Experience Builder (FEB), IBM Web Experience Factory (WEF), IBM

Connections are installed and integrated.

The CTC Conference demonstration site is part of the WCM Content Template Catalog (CTC). You will find

details on how to set this up here: http://www-

01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/welcome/ctc_welcome.html.

The segments for different devices allowing you to easily target content to Desktop, SmartPhone and Tablets

are configured following http://www-

10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=V8+Update%3A+Supplemental+Documentati

on#action=openDocument&res_title=Example_Creating_a_segment_by_device_class_wp8001&content=pdco

ntent and with “Desktop User” added as Otherwise.

The Mobile Preview option can be configured using:

https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=B

E1D7AA2A79761C485257CF900607A35.

The Integration Examples site can be setup using out of the box capabilities.

Deploy the IBM Connections pages using the WEF based portlets from

https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=55

AFF4A1D3D54DF185257CD3006014A4 and Social Rendering Templates from

https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=66

6D72234CA1D57685257CEE0050009A.

The Forms Experience Builder set of pages has the ready to use free Starter Packs forms for FEB deployed that

can be found on http://www-10.lotus.com/ldd/lfwiki.nsf/dx/Forms_Experience_Builder_Starter_Packs.

You can also setup the Script Portlet examples that are provided in OpenNTF:

http://openntf.org/main.nsf/project.xsp?r=project/Script%20Portlet%20Samples%20for%20IBM%20WebSpher

e%20Portal.

http://www-01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/ctc/ctc/ctc_intro.dita

http://www-01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/ctc/ctc/ctc_intro.dita

http://www-10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=V8+Update%3A+Supplemental+Documentation#action=openDocument&res_title=Example_Creating_a_segment_by_device_class_wp8001&content=pdcontent




https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=BE1D7AA2A79761C485257CF900607A35

https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=BE1D7AA2A79761C485257CF900607A35

https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=55AFF4A1D3D54DF185257CD3006014A4

https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=55AFF4A1D3D54DF185257CD3006014A4

https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=666D72234CA1D57685257CEE0050009A

https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=666D72234CA1D57685257CEE0050009A

http://www-10.lotus.com/ldd/lfwiki.nsf/dx/Forms_Experience_Builder_Starter_Packs

http://openntf.org/main.nsf/project.xsp?r=project/Script%20Portlet%20Samples%20for%20IBM%20WebSphere%20Portal

http://openntf.org/main.nsf/project.xsp?r=project/Script%20Portlet%20Samples%20for%20IBM%20WebSphere%20Portal

IBM


Appendix B More Application Integration examples

In this appendix, you may learn about a few other integration examples.

You will first find the standard IBM Connections integration, then Forms Experience Builder and Script

Portlets and finally a combination of Forms Experience Builder and Connections.

__1. If still opened, first close the overlay. Then navigate to the Integration Examples site which has

been previously setup.

__2. You can find many out of the box integration examples, like with Connections, Forms Experience

Builder, etc. In addition to the out of the box Welcome and Getting Started pages, you will

discover a few other pages with integrated applications.

__3. You see the Activity Stream portlet managing the status updates, and other out of the box

Connections portlets.

__4. Then go Social Rendering Templates. These are more out of the box portlets to integrate

Connections into your Digital Experience. These can be easily changed in tool and feel.

IBM


__5. Next go to Forms Experience Builder. This has the starter pack deployed. You may have a look

at any of these ready to use and/or customize forms.

__6. Then go to Script Portlet.

__7. This shows a simple customer list with corresponding details. These are two portlets that someone

already added from the Create – Application menu for you. Now click on any customer on the

left.

http://portalww.demos.ibm.com:10039/wps/myportal/greenwellintra

http://portalww.demos.ibm.com:10039/wps/myportal/greenwellintra

IBM


__8. Under this page you will find more Script Portlet examples. And finally go to Opportunities.

This shows a Forms Experience Builder based Opportunities application and an IBM

Connections Profiles portlet. You can filter down the opportunities list by Rep Name and

Product line. Click on an opportunity in the list, eg. the one shown which has a Camping

product line.

__9. This will show you the details of the opportunity in the FEB application and any expert in

Connections who is tagged with that product line, Camping in this example. sends the Product

Line parameter to the Connections Profiles portlet as a filter parameter. You notice that the

Profiles portlet now shows employees that are tagged with the Product Line information who

act as an expert or contact for further information.

IBM


__10. From here you can easily start collaborating with Heather. Click on her name Heather Reeds.

__11. This gives you access to more information of her.

You have a discovered few additional examples of integration on this platform. Additional labs may provide

you more details on these and other topics around IBM Digital Experience.

IBM


Appendix C Notices

This information was developed for products and services offered in the U.S.A.

IBM may not offer the products, services, or features discussed in this document in other countries. Consult your local

IBM representative for information on the products and services currently available in your area. Any reference to an IBM

product, program, or service is not intended to state or imply that only that IBM product, program, or service may be used.

Any functionally equivalent product, program, or service that does not infringe any IBM intellectual property right may be

used instead. However, it is the user's responsibility to evaluate and verify the operation of any non-IBM product, program,

or service.

IBM may have patents or pending patent applications covering subject matter described in this document. The furnishing

of this document does not grant you any license to these patents. You can send license inquiries, in writing, to:

IBM Director of Licensing

IBM Corporation

North Castle Drive

Armonk, NY 10504-1785

U.S.A.

For license inquiries regarding double-byte (DBCS) information, contact the IBM Intellectual Property Department in your

country or send inquiries, in writing, to:

IBM World Trade Asia Corporation

Licensing

2-31 Roppongi 3-chome, Minato-ku

Tokyo 106-0032, Japan

The following paragraph does not apply to the United Kingdom or any other country where such provisions are

inconsistent with local law: INTERNATIONAL BUSINESS MACHINES CORPORATION PROVIDES THIS

PUBLICATION "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING,

BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY OR

FITNESS FOR A PARTICULAR PURPOSE. Some states do not allow disclaimer of express or implied warranties in

certain transactions, therefore, this statement may not apply to you.

This information could include technical inaccuracies or typographical errors. Changes are periodically made to the

information herein; these changes will be incorporated in new editions of the publication. IBM may make improvements

and/or changes in the product(s) and/or the program(s) described in this publication at any time without notice.

Any references in this information to non-IBM Web sites are provided for convenience only and do not in any manner

serve as an endorsement of those Web sites. The materials at those Web sites are not part of the materials for this IBM

product and use of those Web sites is at your own risk.

IBM may use or distribute any of the information you supply in any way it believes appropriate without incurring any

obligation to you.

Any performance data contained herein was determined in a controlled environment. Therefore, the results obtained in

other operating environments may vary significantly. Some measurements may have been made on development-level

systems and there is no guarantee that these measurements will be the same on generally available systems. Furthermore,

some measurements may have been estimated through extrapolation. Actual results may vary. Users of this document

should verify the applicable data for their specific environment.

Information concerning non-IBM products was obtained from the suppliers of those products, their published

announcements or other publicly available sources. IBM has not tested those products and cannot confirm the accuracy of

performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM

products should be addressed to the suppliers of those products.

All statements regarding IBM's future direction and intent are subject to change or withdrawal without notice, and

represent goals and objectives only

Contents

This information contains examples of data and reports used in daily business operations. To illustrate them as completely

as possible, the examples include the names of individuals, companies, brands, and products. All of these names are

fictitious and any similarity to the names and addresses used by an actual business enterprise is entirely coincidental. All

references to fictitious companies or individuals are used for illustration purposes only.

COPYRIGHT LICENSE:

This information contains sample application programs in source language, which illustrate programming techniques on

various operating platforms. You may copy, modify, and distribute these sample programs in any form without payment to

IBM, for the purposes of developing, using, marketing or distributing application programs conforming to the application

programming interface for the operating platform for which the sample programs are written. These examples have not

been thoroughly tested under all conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or

function of these programs.

Contents

Appendix D Trademarks and copyrights

The following terms are trademarks of International Business Machines Corporation in the United States, other countries,

or both:

IBM AIX CICS ClearCase ClearQuest Cloudscape

Cube Views DB2 developerWorks DRDA IMS IMS/ESA

Informix Lotus Lotus Workflow MQSeries OmniFind

Rational Redbooks Red Brick RequisitePro System i

System z Tivoli WebSphere Workplace System p

Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe

Systems Incorporated in the United States, and/or other countries.

IT Infrastructure Library is a registered trademark of the Central Computer and Telecommunications Agency which is now

part of the Office of Government Commerce.

Intel, Intel logo, Intel Inside, Intel Inside logo, Intel Centrino, Intel Centrino logo, Celeron, Intel Xeon, Intel SpeedStep,

Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States

and other countries.

Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.

Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the United States,

other countries, or both.

ITIL is a registered trademark, and a registered community trademark of The Minister for the Cabinet Office, and is

registered in the U.S. Patent and Trademark Office.

UNIX is a registered trademark of The Open Group in the United States and other countries.

Java and all Java-based trademarks and logos are trademarks or registered trademarks of Oracle and/or its affiliates.

Cell Broadband Engine is a trademark of Sony Computer Entertainment, Inc. in the United States, other countries, or both

and is used under license therefrom.

Linear Tape-Open, LTO, the LTO Logo, Ultrium, and the Ultrium logo are trademarks of HP, IBM Corp. and Quantum in

the U.S. and other countries.

Contents

© Copyright IBM Corporation 2015

The information contained in these materials is

provided for informational purposes only, and is

provided AS IS without warranty of any kind,

express or implied. IBM shall not be responsible

for any damages arising out of the use of, or

otherwise related to, these materials. Nothing

contained in these materials is intended to, nor shall

have the effect of, creating any warranties or

representations from IBM or its suppliers or

licensors, or altering the terms and conditions of

the applicable license agreement governing the use

of IBM software. References in these materials to

IBM products, programs, or services do not imply

that they will be available in all countries in which

IBM operates. This information is based on current

IBM product plans and strategy, which are subject

to change by IBM without notice. Product release

dates and/or capabilities referenced in these

materials may change at any time at IBM’s sole

discretion based on market opportunities or other

factors, and are not intended to be a commitment to

future product or feature availability in any way.

IBM, the IBM logo, and ibm.com are trademarks of

International Business Machines Corp., registered

in many jurisdictions worldwide. Other product and

service names might be trademarks of IBM or other

companies. A current list of IBM trademarks is

available on the Web at “Copyright and trademark

information” at

www.ibm.com/legal/copytrade.shtml.

lab – building your site with ibm digital experience

Documents