Tracking Events in Third Party Websites

You can use Analytics Cloud to track events for analysis on websites not built on Liferay DXP.

Connecting Analytics Cloud to a Third Party Website

Adding Analytics Cloud to a non-Liferay DXP website involves only adding some JavaScript code to the <head> and <body> of your HTML pages:

Add this script declaration to the <head> of any page you want to track using Analytics Cloud:
```
 <script src="https://analytics-js-cdn.liferay.com"></script>
```

Add this script to the <body> of any page you want to track using Analytics Cloud:


<script>
    (function (u, c, a, m, o, l) {
        (o = 'script'),
            (l = document),
            (a = l.createElement(o)),
            (m = l.getElementsByTagName(o)[0]),
            (a.async = 1),
            (a.src = u),
            (a.onload = c),
            m.parentNode.insertBefore(a, m);
    })('https://analytics-js-cdn.liferay.com', function () {
        var PROPERTY_ID = "Replace with your property ID";
        var DATA_SOURCE_ID = "Replace with your data source ID";
        var THE_REGION_KEY = "Replace with your region key";
        var WEDEPLOY_KEY = "Replace with your WeDeploy key";
        Analytics.create({
            channelId: PROPERTY_ID,
            dataSourceId: DATA_SOURCE_ID,
            endpointUrl: `https://osbasahpublisher-ac-${THE_REGION_KEY}.lfr.cloud`,
            projectId: WEDEPLOY_KEY
        });
    });
</script>

For example, here’s a complete index.html file with a sample script to establish a connection:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://analytics-js-cdn.liferay.com"></script>
</head>
<body>
    <script>
        (function (u, c, a, m, o, l) {
            (o = 'script'),
                (l = document),
                (a = l.createElement(o)),
                (m = l.getElementsByTagName(o)[0]),
                (a.async = 1),
                (a.src = u),
                (a.onload = c),
                m.parentNode.insertBefore(a, m);
        })('https://analytics-js-cdn.liferay.com', function () {
            var PROPERTY_ID = "Replace with your property ID";
            var DATA_SOURCE_ID = "Replace with your data source ID";
            var THE_REGION_KEY = "Replace with your region key";
            var WEDEPLOY_KEY = "Replace with your WeDeploy key";

            Analytics.create({
                channelId: PROPERTY_ID,
                dataSourceId: DATA_SOURCE_ID,
                endpointUrl: `https://osbasahpublisher-ac-${THE_REGION_KEY}.lfr.cloud`,
                projectId: WEDEPLOY_KEY
            });
        });
    </script>
</body>
</html>

The client makes a connection using the Analytics.create() method. This requires four values from your Analytics Cloud workspace:

PROPERTY_ID: On your Analytics Cloud settings page, click Properties in the sidebar. Copy the Property ID of the property you want to use or create a new property.
DATA_SOURCE_ID: On your Analytics Cloud settings page, click Data Sources in the sidebar. Click on the data source you want to use and copy the DXP Image ID.
THE_REGION_KEY: To obtain the region key, contact Analytics Cloud support.
WEDEPLOY_KEY: To obtain the WeDeploy key, contact Analytics Cloud support.

Tracking Events

Tracking pages and assets in third-party websites works similarly to tracking custom events in Liferay DXP. You can create an event to send to Analytics Cloud using the Analytics.track() method.

You can identify a user through the Analytics.setIdentity() method. Without this method, Analytics Cloud can’t track users outside of DXP and attributes all events to anonymous users.

Analytics.setIdentity({
    email: "Replace with user email",
    name: "Replace with username",
});

Tip

You can call this function on a successful login to track everything users do when logged into their accounts.

Capability:

Content Management System

Resource Type:

Official Documentation

Feature:

Asset Analytics

Deployment Approach:

Liferay PaaS

Liferay SaaS

Liferay Self-Hosted