Will Quantum Metric work on my app?

support.quantummetric.com/hc/en-us/articles/360023930633-Will-Quantum-Metric-work-on-my-app-

A brief overview of how Quantum Metric captures the user experience.

Quantum Metric leverages and supports today's most modern technologies and
experiences. Whether you're serving a legacy web app, a dynamic web experience with a
SPA framework, rendering a fully native iOS or Android app, or using a hybrid experience,
Quantum Metric provides the highest fidelity experience playback in the industry - OOTB.

How does Quantum Metric work?

At its core, Quantum Metric captures all DOM elements, along with their associated CSS
styles, the specific timing of those changes and leverages those to reproduce a dynamic
web page in the form of replay. However, Quantum Metric is more than a replay tool--we
are a full customer experience platform. Thus, we capture much more than what's
necessary to replay your experience such as

All behavioral and engagement analytics

Performance data around page loads and API calls
Dozens of OOTB experience indicators

And that's just web--we also capture all the aforementioned analytics and replay for Native
iOS and Android. Quantum Metric's SDKs are the best in the industry at helping you
measure and playback your native (or hybrid) experiences in the form of a more traditional
readout akin to what you are accustomed to seeing with web.

What does Quantum Metric capture?

Here’s a partial list of some of the unique things that Quantum Metric can capture (in
addition the the basics):

Desktop & Mobile Web

Complex JavaScript DOM changes

CSS animations
Vector graphics in SVG (including animations)
1/3
 Hover cursors and effects
Embedded <iframe>s
Script-modified input values
Window resizing
Multiple Tabs
Device Rotation
AJAX URL navigation
HTML5 <audio> and <video> playback
Multi-touch events (on mobile devices)
Shadow DOM, and by extension, Web Components

Native Mobile

Entire view hierarchy for the application

Touch interactions
Network requests
Webviews and their contents
Crashes
Low memory warnings
Out-of-box events

Does Quantum Metric support sites built with advanced JavaScript

frameworks?
Yes, QM captures all dynamic DOM, style and timing changes made via your framework and
rendering that back in the form of high-fidelity replay, Quantum Metric is also built to
measure and report all the analytics behind that replay that you are accustomed to seeing
with traditional multi-page capture.

For example, Quantum Metric automatically recognizes and treats route (path) and hash
changes as new page "hits" allowing you to deliver analytics readouts akin to your more
traditional multi-page apps. Additionally, we can monitor all underlying API requests (XHR
and Fetch) your app may make to return dynamic content and deliver baseline reporting
around all calls but more importantly, those which fail or take too long and result in a poor
experience.

Some sample supported frameworks include, but not limited to:

React
Angular 1 and 2+
VueJS
jQuery
Ember

2/3
 Backbone

Is there anything Quantum Metric doesn't support?

With the constant barrage of new technologies entering the market, there will be a few
experiences which Quantum Metric cannot support in addition to legacy technology where
the vendor has dropped support, e.g. Flash. However, the list is quite small, and our
engineers are always exploring new ways to bring new technologies onboard.

Here's a short list of those experiences you will not currently see in replay:

Canvas
WebGL
ActiveX, Flash, Java, Silverlight, and other legacy browser plugins
OpenGL/Metal in native apps

3/3
Adding QM to Your Website
support.quantummetric.com/hc/en-us/articles/360016223254-Adding-QM-to-Your-Website

Installation is as easy as deploying a small piece of JavaScript in your web pages. Most
customers use a Tag Manager (ie. Google TM, Adobe TM, Tealium, Ensighten, etc.) to easily
deploy the snippet across all pages into the website.

Installation Steps

JavaScript Installation Options

There are two ways to add the QM script to your webpages:

1. Manual Copy & Paste - This is where a QM user would copy/paste the QM JavaScript
in to each page manually. Usually at the bottom of each page inside the body tag.
2. Tag Manager - If you are using a Tag Manager to manage all of your various tags, you
can use your tag manager as well to deploy the QM tag. This is the typical method for
most of Quantum Metric's customers.

Installation Process

Step 1
You can find your JS tag in the QM UI. Once you have logged in, you can browse to the
Install page and get your QM JS tag. To access the install script for your subscription, begin
by clicking the profile icon in the upper right corner. Select install from the dropdown menu.

Step 2
1/3
Doing so will reveal your install script. Use the Copy Code button to save the script to your
clipboard.

Step 3
This tag can be added by placing it at the end of each page (inside the <body> tag) or by
leveraging a Tag Manager such as Google, Adobe, Tealium, etc. to deploy it to all pages only
once. If you are using a tag manager, remove the "script" portion of the QM Tag:

<script type="text/javascript">
…
</script>

The View Installations button will show where this script is currently being implemented.

2/3
Important Considerations

Custom Error and Maintenance Pages

Add the QM Tag to any custom error pages such as your Maintenance Page, 400 Page(s) (i.e.
page not found), 500 Page(s), etc. This is critical to understand user frustration/struggle and
how it affects conversion rates.

iFrames
If your website is using iFrames, please add the QM Tag to these iFrames if you want this
recorded in a session.

3/3
iOS Integration Instructions
support.quantummetric.com/hc/en-us/articles/360016334154-iOS-Integration-Instructions

Follow these instructions to add QM session capture to your native iOS application.
Instructions are provided for both Objective-C & Swift.

Initial Steps
Follow these instructions to add Quantum Metric session capture capabilities to your native
iOS application:

1. Download and unzip the latest version of the QM Native iOS SDK.
2. Select your application’s target in Xcode.
3. Drag and drop libQMNative.a into Linked Frameworks and Libraries
4. Drag and drop QMNative.h into your project (on the left-hand side with your other
source code).
5. Under Build Settings -> Search Paths -> Library Search Paths, add the path to the
folder that contains the libQMNative.a file.
6. Under Build Settings -> Linking -> Other Linker Flags, add “-ObjC”.

NOTE: You can get the latest version of the SDK from your Customer Success Engineer or
Solutions Engineer.

Additional Steps for Swift Projects

If your project is in Swift you will need to complete these additional steps:

1. If the project does not already have a Bridging Header, create one by completing the
following steps:
a. Under File -> New -> File, select Header File, and name the file something
like “MyApp-Bridging-Header.h”
b. In your target’s Build Settings, under the Objective-C Bridging Header
settings, add the path to the new Header File you just created (this normally
needs to include your app name – for example: MyApp/MyApp-Bridging-
Header.h)
2. Open “MyApp-Bridging-Header.h” and import QMNative.h to allow Objective-C
1/3
 headers to be available in Swift:

#import "QMNative.h"

Configure Quantum Metric within your App Delegate

Within your App Delegate’s application:didFinishLaunchingWithOptions: method, initialize
QMNative.

Objective-C

#import "QMNative.h"; [QMNative initializeWithSubscription:@"yoursubscription" uid:@"youruid"];

Swift

QMNative.initialize(withSubscription: "yoursubscription", uid: "youruid")

Full Examples

Objective-C - Full Example

#import "AppDelegate.h"
#import "QMNative.h";
@implementation AppDelegate
- (BOOL) application: (UIApplication * ) application didFinishLaunchingWithOptions: (NSDictionary * )
launchOptions {
[QMNative initializeWithSubscription: @ "yoursubscription"
uid: @ "youruid"
];
// do any other necessary launch configuration
return YES;
}
@end

Swift - Full Example

import UIKit
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions:
[UIApplicationLaunchOptionsKey: Any] ? ) - > Bool {
QMNative.initialize(withSubscription: "yoursubscription", uid: "youruid")
// do any other necessary launch configuration
return true
}
}

2/3
Android Integration Instructions
support.quantummetric.com/hc/en-us/articles/360021459953-Android-Integration-Instructions

Follow these instructions to add Quantum Metric session capture to your Native Android
application.

Installation

ADD THE QUANTUM METRIC LIBRARY

Copy the AAR file that you received from your Quantum Metric Account Executive into
the libs directory of your Android Application project.

Add the following line to the dependencies section of your Android application
project’s build.gradle file:

implementation fileTree(dir: 'libs', include: ['quantum*.aar'])

INITIALIZE AND START CAPTURE

In your Android Application project's primary Application class, initialize and start Quantum
Metric's SDK in the onCreate method, replacing <SUBSCRIPTION> with your Quantum
Metric subscription name and <UID> with your unique SDK UID, obtained from your
Quantum Metric Account Executive:

@Override
public void onCreate() {
super.onCreate();
QuantumMetric.initialize(
"<SUBSCRIPTION>",
"<UID>",
this
).start();
}

Initialization Options
1/5
QuantumMetric.Initialize returns a QuantumMetric.Builder object, which contains
methods for setting optional parameters, as follows:

BROWSER NAME
The default Browser name sent to Quantum Metric is the Application label, displayed on
your application’s default launcher icon. This value can be overridden with a call to
withBrowserName, just after initialize, like so:

@Override
public void onCreate() {
super.onCreate();
QuantumMetric.initialize(
"<SUBSCRIPTION>",
"<UID>",
this
)
.withBrowserName("My Custom Browser Name")
.start();
}

Usage

STOPPING CAPTURE
After initialization, the SDK can be manually disabled with a call to:

QuantumMetric.stop();

Note: After a call to stop(), no further data will be sent to Quantum Metric for the
current Application instance. Capture can be re-started via a call to initialize and start as
detailed in the Install instructions above.

RESETTING THE CURRENT SESSION

The current Session can be manually ended with a call to:

QuantumMetric.resetSession();

Note: All Activities, Fragments and Events that follow a call to resetSession() will be attributed to
a new Session.

SETTING USER INFORMATION

2/5
A known user's email address can be set with a call to:

QuantumMetric.setUserEmailAddress("luigi@acme.com");

SENDING EVENTS
Using an Event ID, which can be found in the Quantum Metric Web UI in Settings > Events,
a new Event and its value can be sent through the SDK, using the following syntax:

QuantumMetric.sendEvent(101, "Hello World!");

Some Events signify special situations, such as conversions. These special cases can be
flagged using an optional set of EventType arguments as follows:

QuantumMetric.sendEvent(102, "86753", EventType.CartValue);

Tip: Some useful EventType options

are EventType.Conversion, EventType.CartValue and EventType.ABNSegment

SENDING ERRORS
Using an Error ID, which can be found in the Quantum Metric Web UI in Settings > Errors, a
new error and its value can be sent through the SDK, using the following syntax:

QuantumMetric.sendError(103, "An Exception occurred!");

EXCLUDING API REQUEST/RESPONSE BODIES

Specified portions of API Request and Response bodies can be excluded at the client device,
keeping sensitive data such as PII from being transmitted. If you would like to selectively
drop portions of an API Call Request or Response, please discuss this feature with your
Quantum Metric Engineer.

FETCHING SESSION AND USER IDENTIFIERS

Quantum Metric Session Cookie and User Cookie can be fetched from the SDK using a
callback pattern. After a call to initialize and start, a callback listener can be registered
using the following syntax:

3/5
QuantumMetric.addSessionCookieOnChangeListener(
new SessionCookieOnChangeListener() {
@Override
protected void onChange(
String sessionCookie,
String userCookie) {
<USE COOKIES HERE>
}
});

This callback will fire any time the Session or User cookie values change. A registered
callback listener can be removed using the following syntax:

QuantumMetric.removeSessionCookieOnChangeListener(
sessionCookieOnChangeListener
);

ENCRYPTING SENSITIVE VALUES

Quantum Metric automatically performs end-to-end encryption on all values flagged as User
Attributes. By passing any of the following flags to sendEvent, the given value will only be
accessible to authorized users of your subscription who possess your organization’s unique
private key:

EventType.EmailAddress, EventType.Login, EventType.FirstName and

EventType.LastName.

Quantum Metric also automatically encrypts all API Request and Response headers and
body contents as well as all User Inputs, since these often contain sensitive values.

In addition, you can choose specific Events and Errors whose values you would like to
encrypt. When calling sendEvent or sendError, simply pass Encrypted as
the EventType or ErrorType as follows:

QuantumMetric.sendEvent(
104,
"Sensitive Value",
EventType.Encrypted
);

QuantumMetric.sendError(
105,
"Sensitive Error Message",
ErrorType.Encrypted
);

4/5