Intelligent Handshake®

Page Manipulation SDK

The Page Manipulation SDK ensures an optimal implementation of the Intelligent Page with nearly no software engineering needed. The SDK exposes simple common HTML constructs while encapsulating the integration of HTTP networking, asynchronize cloud parallel processing, and dynamic HTML rendering.

Getting Started

  1. Convert the Intelligent Tag from Learning Mode to Manipulation Mode.
  2. Review the Intelligent Handshake® Plan and identify target HTML Elements.
  3. Prepare the target HTML Elements.
  4. Define the Default Experience.
  5. Create Intelligent Handshake® HTML Script Elements.
  6. Create the Page Plan Object.
  7. Use Page Manipulation URL Parameters to test the user experience to the Intelligent Handshake® Plan.

Prepare the Target HTML Elements

Each HTML Element targeted by the Intelligent Handshake® Plan needs to have an unique HTML Element ID. Use the Target Element's existing id or add one if needed.

Example

<div id="id10001-001" ...>
   ...
</div>

Define the Default Experience

It's the Internet, sometimes things don't go as planned. A well-defined Default Experience ensures a positive user experience every time regardless of the technical environment. Though the possibilities of user experiences have no limit, there are 2 basic design concepts. It is common to mix and match server default and manipulation default across the multiple Targeted Elements of a single page.

Server Default Render

This is the AS-IS server render. The web server renders the HTML page with the default user experience already rendered on the HTML document. The Intelligent Handshake® Manipulation Mode SDK does nothing to render the Default Experience.

Manipulation Default Render

This is the reveal browser render. The web server renders either an empty target element or a pre-manipulated place holder experience. When the Intelligent Handshake® platform responds or the defaultTimeoutAfterLoad value is reached the Page Manipulation SDK renders the final Default Experience.

Create Intelligent Handshake® HTML Script Elements

A new HTML <script /> type, type="html/intelligenthandshake", was created to enable the web developer to create the HTML for the manipulation experiences. The <script type="html/intelligenthandshake"/> element is invisible to the browser but allows the web developer to design the manipulation experiences in native HTML using their existing development environment.

Example

<script type="html/intelligenthandshake" id="IH_Hero_H" ...>
   ...
   <div>
      ...
   </div>
   ...
</script>

Create Page Plan Object

The Intelligent Handshake® Scores is connected to the user experience through the Page Plan Object. It is a JavaScript configuration object translating the Intelligent Handshake® Plan to the Page Manipulation SDK.

Don't forget to convert the Intelligent Tag from Operating Mode to Manipulation Mode.

Field Definitions

Field Data Type Examples Description
defaultTimeoutAfterLoad Number 300 Maximum # of milliseconds to wait for the Intelligent Handshake® Scores before rendering the Default Experience.
elementPlans Array of Objects [{...},...] Array of 1 or more Element Plan objects for each Target Element.
elementPlans.elementIDs Array of Strings ["id151841-409", "id151841-52"] Array of 1 or more Target HTML Element IDs.
elementPlans.defaultMode String "None" Manipulation Mode for the Default Experience.
elementPlans.defaultHTMLID Number null HTML Element ID for the Default Experience content.
elementPlans.HTMLScores Array of Objects [{...},...] Array of 1 or more HTML Scores.
elementPlans.HTMLScores.score String "H" Intelligent Handshake® Scores
elementPlans.HTMLScores.mode String "Append" Manipulation Mode for the Manipulation Experience.
elementPlans.HTMLScores.HTMLID String IH_HERO_H HTML Element ID for the Manipulation Experience content.

Manipulation Modes

None - Do nothing
Append - Add Manipulation content to the end of the existing HTML
Replace - Replace existing HTML with the Manipulation content

Example

<script type="text/javascript">
	intelligenthandshake.PagePlan =
	{
		defaultTimeoutAfterLoad: 10,
		elementPlans:
		[
			{
				elementIDs: ["id151841-409", "id151841-52"],
				defaultMode: "None",
				defaultHTMLID: null,
				HTMLScores: [
					{
						score: "H",
						mode: "Append",
						HTMLID: "IH_Hero_H"
					}
				]
			}
		]
	}
</script>

Test the User Experience

Use the Intelligent Tag's URL parameters to test all the user experiences by Intelligent Handshake® Scores and different response times.

Example

https://livesite.com/?ihscore=L
https://livesite.com/?ihscore=M
https://livesite.com/?ihscore=H
https://livesite.com/?ihscore=NB

https://livesite.com/?ihscore=H&ihmilliseconds=0
https://livesite.com/?ihscore=H&ihmilliseconds=300
https://livesite.com/?ihscore=H&ihmilliseconds=1000

See Also