SAP CDC SA Demo Framework

This page allows you to take alook at the aspects of the SAP CDC SA Framework, how to implement (which should be simple) and what fucnitonality is available. The styling and functionality is a real demo of how things work.

Page Setup

Page Body


<!-- SAP CDC SA Framework: REQUIRED -->
<div id="placeholder_offcanvas"></div>

<!-- HEADER: START -->
	    <header>
<!-- SAP CDC SA Framework: REQUIRED -->
            <div id="placeholder_profile_bar"></div>
	    </header>
<!-- HEADER: END -->

<!-- MAIN: START -->
        <main>...</main>
<!-- MAIN: END -->

<!-- FOOTER: START -->
        <footer>...</footer>
<!-- FOOTER: END -->

<!-- SAP CDC SA Framework: REQUIRED - MODALS: START -->
        <div id="placeholder_modal_core"></div>
        <div id="placeholder_modal"></div>
<!-- MODALS: END -->

<!-- SAP CDC SA Framework: REQUIRED - HOTSPOTS: START -->
        <div id="placeholder_hotspots">
            <!--
            <div class="hotspot action click tooltip-hover" title="Hotspot Example" data-id="hotspot_01" data-type="hotspot" data-name="My Hotspot" data-url="#"  data-thumbnail="#" data-meta="" data-event="click" style="position: fixed; width: 100px; height: 50px; top: 10%; left: 10%"></div>
            -->
        </div>
<!-- HOTSPOTS: END -->

                        
Page Script

<!-- SAP CDC SA Framework: REQUIRED Script -->
<!-- JQuery: //jquery.com/ -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=01"></script>
<!-- Boostrap: //getbootstrap.com/ -->
        <script type="text/javascript" src="/sap/js/bootstrap.js?ver=01"></script>
<!-- Modernizr: //modernizr.com/ -->
        <script type="text/javascript" src="/sap/js/modernizr-2.8.3.min.js?ver=01"></script>
<!-- YouTube Api: //developers.google.com/youtube/iframe_api_reference?hl=en -->
        <script type="text/javascript" src="//www.youtube.com/iframe_api?ver=01"></script>
<!-- Scroll Reveal Api: //scrollrevealjs.org/ -->
        <script type="text/javascript" src="//cdn.jsdelivr.net/scrollreveal.js/3.0.6/scrollreveal.min.js?ver=01"></script>
<!-- SAP CDC: Core Script (SA Framework) -->
<!-- Parameters are Optional -->
        <script id="gscript" type="text/javascript" src="/sap/js/sap-cdc-core-v1.0.min.js?ver=1670">
        {
            "scriptProtocol": "//"
            , "scriptUrl": "cdn.gigya.com/js/socialize.js?apiKey="
            , "scriptApiKey": "3_7yhpxP54S87Wk4gPRRinbQ2HMhXgXM04wpm5DVi5ZXfwmnV97UzA6ZLlS8leL0qe"
            , "scriptExtras": ""
            , "scriptCid": "Gigya SA Framework Website"
            , "serviceUrl": "/sap/webservice/gigya-ws-v1.0.aspx/"
            , "siteTheme": "default"
            , "siteTooltipEnabled": true
            , "sitePopoverEnabled": true
            , "siteHotspotsVisiable": false
            , "raasRegSource": "Gigya SA Framework Website"
            , "raasScreenSetRegistration": "Media-RegistrationLogin"
            , "raasScreenSetProfile": "Media-ProfileUpdate"
            , "raasScreenSetPrefCentre": "Media-PrefCentre"
            , "engagementFirstVisitEnabled": true
            , "engagementOnLoginProfilingEnabled": true
            , "engagementOnLoginProfiling1": 1
            , "engagementOnLoginProfiling2": 2 
            , "engagementOnLoginProfiling3": 3
            , "trackingLoginEnabled": true
            , "trackingLogoutEnabled": true
            , "trackingEventsEnabled": true
            , "trackingJourneyEnabled": true
            , "eventNotificationEnabled": true
            , "eventLoadingEnabled": true
            , "loyaltyEnabled": true
            , "loyaltyChallengeOverall": '_default'
        }
        </script>
<!-- SAP CDC: Custom Script -->
        <script type="text/javascript" src="/sap/themes/default/js/sap-cdc-custom.js?ver=1670"></script>

                        

Frameworks (Scripts)

JQuery

Framework: //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=01

Documentation

Bootstrap

Framework: /sap/js/bootstrap.js?ver=01

Documentation

Modernizr

Framework: /sap/js/modernizr-2.8.3.min.js?ver=01

Documentation

YouTube API

Framework: //www.youtube.com/iframe_api?ver=01

Documentation

Scroll Reveal

Framework: //cdn.jsdelivr.net/scrollreveal.js/3.0.6/scrollreveal.min.js?ver=01

Documentation

Gigya

CORE

Framework: /sap/js/sap-cdc-core-v1.0.min.js?ver=1670


CUSTOM

File: /sap/themes/default/js/sap-cdc-custom.js?ver=1670

Theme

Default

The Gigya SA Framework has been built to allow you to scale out your own themes. As default, you have a 'default' theme to get going with, but this can be copied and renamed in the '/sap/themes/' folder and then changed accordinly (all 'Core' files are directly under the '/sap/' folder, your theme allows you to change accordinly).

If you do change your site theme, you will need to change in the following locations.


Gigya SAFramework

RaaS
Screen-Sets - CUSTOM

You can create your own custom screensets and incorporate these are following

Password Management

.btn-raas-create-password is only displayed when the user does not have a password.

.btn-raas-reset-password is only displayed when the user has a password.

Engagement Plugins

Connections

Make sure you apply an 'ID' to the element for the connections to be injected into!

Engagement Bar
Share
ShareBar

Custom

Reactions
Comments
Ratings & Reviews
Signals

Loyalty

Loyalty

Make sure Loyalty is enabled for the API Key and setup and configured!

The framework uses the following 'Action IDs', add these to your Loyalty in Gigya, if you let me know I can export my Loyalty to JSON and you can upload to your instance:

  • actionPointsXS
  • actionPointsSM
  • actionPointsMD
  • actionPointsLG
  • actionPointsXL
  • actionPointsArticleRead
  • actionPointsArticleWishList
  • actionPointsProductAdded
  • actionPointsProductWishList

Download the JSON

Status

Challenges

Achievements

Leaderboard

Profile Data

Profile Placeholders

You will need to login to see the data

UID: (.profile-id)

Created Timestamp: (.profile-created)

Registration Src: (.profile-regsource)

Login Device: (.profile-login-id)

Login Device: (.profile-login-device)

Login Browser: (.profile-login-browser)

Login Count: (.profile-login-site-count)

Login Timestamp: (.profile-login-timestamp)

Login Country: (.profile-login-location-country)

Login Region: (.profile-login-location-region)

Privacy: (.profile-privacy)

Email: (.profile-email-primary)

Provider: (.profile-login-provider)

Name (Nickname): (.profile-name)

First Name: (.profile-name-first)

Last Name: (.profile-name-last)

Photo: (.profile-img-photo)

Thumbnail: (.profile-img-thumbnail)

Age: (.profile-age)

Gender: (.profile-gender-name)

Relationship Status: (.profile-relationship-status)

Meta-Data: (.profile-meta)

Membership - Role: (.profile-membership-type)

Membership - Subscribed: (.profile-membership-subscribed)

Subscription - Level: (.profile-subscription-level)

Subscription - Cost: (.profile-subscription-cost)

Subscription - Period: (.profile-subscription-period)

Subscription - Timestamp: (.profile-subscription-timestamp)

Subscription - expiry: (.profile-subscription-expiry)

 

Profile Objects

The following variable JS objects are available to tap into the data

  • Variables - Global.vars.##
  • Account Info - Global.vars.obj.accountInfo
  • User Obj - Global.vars.obj.userObj
  • Profile Quick Values - Global.vars.profile
Get Account Info - Data
  • .profile-info
  • .get-account-info

The '.profile-info' takes less processing as the data is obtained from the 'Global.vars.obj.accountInfo' object.

The '.get-account-info' makes a 'accounts.getAccountInfo' everytime to get the data.

First name (Profile):

Last name (Profile):

Role (Data):

Tracking

Tracking

Registration/Login (Automatic)

behaviour.connections.login.login_[%LOGIN_COUNT%]_[%TIMESTAMP%]

Tracking: Last Login (Automatic)

behaviour.connections.lastLogin

Tracking: Logout (Automatic)

behaviour.connections.logout.logout_[%LOGIN_COUNT%]_[%LOGIN_ID%]

Tracking: Page/Journey Tracking (Automatic)

behaviour.connections.journey.journey_[%LOGIN_COUNT%]_[%LOGIN_ID%]_[%TIMESTAMP%]

Tracking: Relationship Status Tracking (Automatic)

For demo purposes the 'Device Type' is determined by the 'Screen.Width', meaning you change change the screen size or use a browser emulator to simulate different devices.

Device is set as follows.

  • Watch = < 200
  • Phone = < 400
  • Phablet = < 450
  • Tablet = < 1050
  • else Computer

Events

Set Account Info ([%DATA_KEY%])

Key/Value



Object

Purchase Subscription
Competition
General (behaviour.activity.[DATA_TYPE])
Action - Image (behaviour.activity.image)
Action - Article (behaviour.activity.article)
Action - Video (behaviour.activity.video)

Search Results

Display Videos

Use to insert the users currently watched videos.

Action - Basket (ecommerce.basket.active)

Events - Wish List

General (prefCentre.wishlist.[%DATA_TYPE%])
Read Later ([%prefCentre.wishlist.article)
Real Later - Remove ([%prefCentre.wishlist.article)
!! NEED TO DO
Product (prefCentre.wishlist.product)

Events - Preference Centre (prefCentre.[%DATA_KEY%])

Add

Events - Persona

Add (persona.[%DATA_KEY%])

Meta-Data

Add (persona.meta)
Remove

Personalization

Authentication

You are currently Authenticated.

You are currently Unauthenticated.

Gender

This is what the user will see if their gender is unknown (or unauthenticated).

This is what the user see's if they are Male.

This is what the user see's if they are Female.

Age

This is what the user will see if their age is unknown (or unauthenticated).

This is what the user see's if they are less than 18.

This is what the user see's if they are less than 31.

This is what the user see's if they are less than 51.

This is what the user see's if they are less than 101.

Relationship

This is what the user will see if their relationship status is unknown (or unauthenticated).

This is what the user see's if they are Single.

This is what the user see's if they are In a relationship.

This is what the user see's if they are Engaged.

This is what the user see's if they are Married.

Subscription

This is what the user will see if they are NOT Subscribed.

This is what the user will see if they ARE Subscribed.

Membership Level

This is what the user will see if the are a public user.

This is what the user see's if they have Bronze membership.

This is what the user see's if they have Silver membership.

This is what the user see's if they have Gold membership.

This is what the user see's if they have Platinum membership.

| | | |

accounts.search()

Note: I have found if I use 'SELECT *' the response from the webservice breaks (packets too big I think?). For now use 'SELECT UID, profile.email, profile.firstName, profile.lastName, profile.photoURL'.

accounts.search(): Click & Hover

Default results container is 'accounts_search_results', you can choose using 'data-results-container'.

Progessive Profiling

Modals

You will need to add your content to the modals depending on what you want.

Gigya Screen-Sets
WIP

Data Visualization

Identity Data
Display Activity

Display Wish List

Wish List Count = 0


Search Results

Display Basket

Wish List Count = 0


Search Results

Display Logins

Display Journey

If you click the Journey Page, it will do a 'accounts.search' and find other users whom also visited that page.


Search Results

Display Likes

If you click the like, it will do a 'accounts.search' and find other users whom also like that like.

Friends (Facebook)

Will return only Facebook friends and only those whome are also in Gigya.

Connecting People

If you click the like, it will do a 'accounts.search' and find other users whom also like that like.


Add People

Current People Connections

Misc

Mission Control
Hotspots
Scroll Animation

Bootstrap

Tooltips
Popover

Modals

Generic Modal
All Modals
Offers
top

Default offer

And a little description.
and so one

top

Primary offer

And a little description.
and so one

top

Seconadry offer

And a little description.
and so one

top

Tertiary offer

And a little description.
and so one

top

Success offer

And a little description.
and so one

top

Info offer

And a little description.
and so one

top

Warning offer

And a little description.
and so one

top

Danger offer

And a little description.
and so one


Bootstrap Framework

For more information refer to Boostrap

Change the 'bootstrap/variables.less' file to change the styling of the site.

Colors (Bootstrap Ref)
Gray Scale (Bootstrap Ref)

X-Small (col-xs-#)

.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Small (col-sm-#)

.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Medium (col-md-#)

.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Large (col-lg-#)

.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Typography

Headings

h1 Bootstrap heading Secondary text

h2 Bootstrap heading Secondary text

h3 Bootstrap heading Secondary text

h4 Bootstrap heading Secondary text

h5 Bootstrap heading Secondary text
h6 Bootstrap heading Secondary text

Paragraphs

p Paragraph including highlight text.

Paragraph lead.


Text Sizes

Normal text size.

Small text size.

Large text size.

h1 h2 h3 h4 h5 h6 classes


Text Alignment

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Text Color (Bootstrap Ref)

Normal text color.

Primary text color.

Secondary text color.

Tertiary text color.

Success text color.

Info text color.

Warking text color.

Danger text color.


Links

This is a normal link.

This is a primary link.

This is a secondary link.

This is a tertiary link.

This is a success link.

This is a info link.

This is a warning link.

This is a danger link.

Jumbotron (Bootstrap Ref)

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Buttons (Bootstrap Ref)

Large


Normal


Small


X-Small


Button Group

Button Group

Normal


Inverted

Alerts (Bootstrap Ref)
Alerts (Bootstrap Ref)

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Lists

Products
a
Product 1
9.99

Stock: 5

a
Product 2
9.99

Stock: 5

a
Product 3
9.99

Stock: 5

a
Product 3
9.99

Stock: 5


Font Awesome

For more information refer to Font Awesome

Examples

Normal

fa-cog


Sizes

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x


Animation


Buttons (with Icons)

Buttons Group