View source for DCR Static Domless SDK

== License ==
Nielsen SDK contains material that is protected by copyright laws, patent laws, trade secret laws, and by international treaty provisions and is Copyright © 2024 The Nielsen Company (US) LLC. All intellectual property rights and licenses therein are reserved by The Nielsen Company (US) LLC and its licensors. Please read the license agreement presented here, which must be accepted in order to download the Nielsen SDKs. For more information, reach out to your Nielsen Technical Account Manager(TAM).

== DOM-less SDK DCR Static Introduction ==
The Nielsen DOM-less SDK is a Javascript based cross-platform library that clients can use to integrate the Nielsen Digital Content Rating or Digital TV Rating measurement in apps for dom-less platforms like ReactNative, NodeJS etc. apps.

The Digital Content Ratings (DCR) Static product provides content consumption measurement on client mobile apps or webpages. This measurement includes insight into the total time a user spent on a webpage, how they navigated through the page via links, and many other data points. This tutorial provides the steps to implement the DCR Static product in a sample NodeJS app. It includes:

* DOM-less SDK Initialization
* DCR Static Metadata: information about the content being tracked
* DCR Static Events/API calls

By the end of this guide you will have the needed steps to integrate Nielsen's DOM-less SDK in your app.

== DOM-less SDK DCR Static Step 1 - Obtain AppID ==
To begin using the DOM-less SDK you will need to obtain an Application ID (AppId)
{| class="wikitable"
!
!Item
!Description
!Source
|-
|✅
|App ID (appid)
|Unique ID assigned to the player/site and configured by product
|Contact your Nielsen TAM
|}
The appid is a 37 character unique ID assigned to the player/site and configured by product and is required when creating a new instance of the DOM-less SDK on the app.

Example: '''PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX'''

== DOM-less SDK DCR Static Step 2 - SDK Initialization ==
This project is an API that allows clients to integrate the Nielsen SDK in DOM-less environments like React Native, NodeJS, etc.

Refer to the " DOM-less SDK initialization " section in the DOM-less SDK API Reference Guide.

==== SDK Initialization ====
The following table contains the list of arguments that can be passed 
{| class="wikitable"
!Parameter / Argument
!Description
!Source
!Required?
!Example
|-
|appid
|Unique Nielsen ID for the application. The ID is a GUID data type. If you did not receive your App ID, let us know and we will provide you.
|Nielsen-specified
|Yes
|PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
|-
|instanceName
|DOM-less SDK instance name 
|Client provided
|Yes
|String eg. abcdefg
|-
|appName
|Application name
|Client provided
|Yes
|appName: 'BSDK RN Sample App'
|-
|deviceId
|Device ID
|Client provided
|Yes
|deviceId: '38400000-8cf0-11bd-b23e-10b96e40000d'
|-
|nol_sdkDebug
|Enables Nielsen console logging. Only required for testing
|Client-provided
|No
|nol_sdkDebug: 'debug'
|-
|domlessEnv
|Specify the domless environment. 
"1" for ReactNative

"2" for Amazon

"3" for NodeJS

"4" for Custom
|Client-provided
|Yes
|domlessEnv: '1'
|}

==== Nielsen Debug Node.js Server for Event Tracking ====
We are excited to announce the beta version of our Debug Node.js server, designed to track requests and events sent from our Dom-less SDK using WebSocket connections. While this feature is not officially released, we are currently looking for users interested in beta testing.

If you'd like to try this tool and provide feedback, please reach out to your Nielsen Technical Account Manager (TAM) for more information. Your insights would be invaluable in helping us refine this feature for a future release!

== DOM-less SDK DCR Static Step 3 - Create DCR Static Metadata Object ==
1. <code>staticstart</code> - this event is used to send DCR Static metadata to the Nielsen SDK. This event should be called when the app is loaded.

<syntaxhighlight lang="javascript">
instance.ggPM('staticstart', {
  type: 'static',
  assetid: 'HHF887465-9486', // *DYNAMIC METADATA*: unique ID for each article **REQUIRED**
  section: 'SPORTS', // *DYNAMIC METADATA*: section of site **REQUIRED**
  segA: 'HDVIDEOS', // *DYNAMIC METADATA*: custom segment
  segB: '', // *DYNAMIC METADATA*: custom segment
  segC: '', // *DYNAMIC METADATA*: custom segment
});
</syntaxhighlight>


2. <code>onPaginate</code> - this event is used to re-initialize the SDK when a user scrolls to a new section of the page. Mostly seen in integrations with continuous scrolling.

<syntaxhighlight lang="javascript">

instance.ggPM('onPaginate', 1);

</syntaxhighlight>

3. <code>staticend</code> - This event is used to end DCR Static measurement. This event should be called when the user is closing the app or before navigating to a new section/page within the app (new page will have its own static metadata).

==== Events that can be passed to and processed by processEvent method ====
1. <code>`blur`</code> - This event should be passed to processEvent when the app goes to the background.<syntaxhighlight lang="javascript">
instance.processEvent({ type: 'blur', timestamp: Date.now() });
</syntaxhighlight>

2. <code>`focus`</code> - This event should be passed to processEvent when the app goes to the foreground.<syntaxhighlight lang="javascript">
instance.processEvent({ type: 'focus', timestamp: Date.now() });
</syntaxhighlight>

3. <code>`appclose`</code>- This event should be passed prior to closing the app.<syntaxhighlight lang="javascript">
instance.processEvent({ type: 'appclose', timestamp: Date.now() });
</syntaxhighlight>

== DOM-less SDK DCR Static Step 4 - Basic Set of Events - Sample Navigation ==

==== Sample Nielsen Domless DCR Static Sample App ====

* [https://github.com/NielsenDigitalSDK/bsdk-domless-samples/tree/main/react-native Nielsen Domless React-Native DCRStaticSampleApp]

==== Sample DCR Static Integration ====
<syntaxhighlight lang="javascript">
import { BsdkInstance } from 'bsdk-domless';

const nsdkConfig = {
    app_id: 'PXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
    instance_name: 'StaticInstance',
};

const implementationHooks = {
  Log: {
    info: function (log: any) {
      console.info(log);
    },
    debug: function (log: any) {
      console.debug(log);
    },
    warn: function (log: any) {
      console.warn(log);
    },
    error: function (error: any) {
      console.error(error);
    },
  },
  Storage: {
    setItem: async function (key: any, value: any) {
        /* 
        Sets a string value for given key. This operation can either modify an existing entry,
        if it did exist for given key, or add new one otherwise.
        In order to store object value, you need to serialize it, e.g. using JSON.stringify(). 
        */
    },
    getItem: async function (key: any) {
        /*
        Gets a string value for given key. This function can either return a string value for 
        existing key or return null otherwise.
        In order to store object value, you need to deserialize it, e.g. using JSON.parse().
        */
    },
    removeItem: async function (key: any) {
        // Removes item for a key, invokes (optional) callback once completed.
    }
  },
  Fetch: async function (url: string | URL | Request, options: any) {
    // REQUIRED that client pass in User-Agent header via options in Fetch request
    const clientOpts = {
      headers: {
        // Example User-Agent
        'User-Agent': 'react-native-domless/1.6.7.42 Dalvik/2.1.0 (Linux; U; Android 5.1.1; Android SDK built for x86 Build/LMY48X)',
      },
    };

    const data = Object.assign(options, clientOpts);
    const response = await fetch(url, data);
    if (response.ok) {
      return response;
    } else {
      throw new Error('Request failed');
    }
  },
  SetTimeout: function (callback: () => void, timeout: number | undefined) {
    return setTimeout(callback, timeout);
  },
  SetInterval: function (callback: () => void, interval: number | undefined) {
    return setInterval(callback, interval);
  },
  ClearTimeout: function (timeout: string | number | NodeJS.Timeout | undefined) {
    clearTimeout(timeout);
  },
  ClearInterval: function (interval: string | number | NodeJS.Timeout | undefined) {
    clearInterval(interval);
  },
};

const nSdkInstance = new BsdkInstance(
    nsdkConfig.app_id,
    nsdkConfig.instance_name,
    {
        appName: 'DOM-less SDK Static Sample App',
        deviceId: 'testDeviceId',
        nol_sdkDebug: 'debug', // REMOVE debug flag when going to production
        domlessEnv: // "1" for React Native | "2" for Amazon | "3" for NodeJS | "4" for Custom
        // reference SDK interface documentation
        // for additonal metadata properties
    }, 
    implementationHooks);

// Sample index.tsx component
export default function HomeScreen() {
  // Retrieve AppState
  const appState = useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);

  useEffect(() => {
    const subscription = AppState.addEventListener('change', (nextAppState) => {
      appState.current = nextAppState;
      setAppStateVisible(appState.current);

      if ((appState.current.match(/background/) || appState.current.match(/inactive/)) && nSdkInstance) {
        // Nielsen SDK processEvent on background state
        nSdkInstance.then((instance: any) => {
          instance.processEvent({ type: 'blur', timestamp: Date.now() });
        });
      }

      if (appState.current.match(/active/) && nSdkInstance) {
        // Nielsen SDK processEvent on active state
        nSdkInstance.then((instance: any) => {
          instance.processEvent({ type: 'Focus', timestamp: Date.now() });
        });
      }
    });
    return () => {
      subscription.remove();
    };
  }, []);

  nSdkInstance.then((instance: any) => {
    instance.ggPM('staticstart', {
        type: 'static',
        assetid: 'HHF887465-9486', // *DYNAMIC METADATA*: unique ID for each article **REQUIRED**
        section: 'SPORTS', // *DYNAMIC METADATA*: section of site **REQUIRED**
        segA: 'HDVIDEOS', // *DYNAMIC METADATA*: custom segment
        segB: '', // *DYNAMIC METADATA*: custom segment
        segC: '', // *DYNAMIC METADATA*: custom segment
    });
  });
  return (
    <View style={styles.container}>
    </View>
  );
}
</syntaxhighlight>