Integrate using Google Tag Manager (Older SDK)

This guide describes how to use Google Tag Manager (GTM) to integrate Detection and Response services into your web app. For more information about GTM, see Google's documentation.

Prerequisites

Your web application must be integrated with Google Tag Manager, and send it the user identifier (for authenticated users) and the user actions you want to evaluate with Mosaic. The examples in this guide use the data layer to send information to Google tags.

Step 1: Get client credentials

To integrate with Mosaic, you'll need to obtain your client credentials from the Admin Portal. From Risk > Settings, you can obtain your client ID and client secret. These will be used to identify your app and generate authorization for requests to Mosaic.

Step 2: Create GTM variables

To send the user identifier and action to Mosaic, you'll need GTM variables that store these values. Create a variable for the user identifier and another one for the user action you want to report.

To create a variable in GTM:

1. Go to Variables > User-Defined Variables > New .
2. At the top of the page, set a title for the variable (e.g., Mosaic user ID ).
3. Click Variable Configuration and then select Data Layer Variable .
4. For Data Layer Variable Name , enter the name of the variable that your web app sends to GTM (e.g., userID ).
5. Click Save .
6. Repeat steps 1-5 to create the variable for the user action you want to report.

Step 3: Load SDK via GTM

Load and initialize the Detection and Response SDK using GTM:

1. Go to Tags > New .
2. At the top of the page, set a title for the tag page (e.g., Initialize Detection and Response SDK ).
3. Click Tag Configuration > Custom HTML .
4. In the HTML window, add the script tags used to install and initialize the SDK. In the snippet below, the SDK is initialized with the user ID (for users that are fully authenticated, including, for example, any required 2FA that was done). The [CLIENT_ID] is your client ID from step 1, and [userID] is your GTM user variable created in step 2.
   Copy

   Copied

   <script>
     console.log("Start event listener for TSAccountProtection");
     document.addEventListener("TSAccountProtectionReady", function(e) {
       console.log("TSAccountProtection ready");
       window.myTSAccountProtection = new TSAccountProtection("[CLIENT_ID]");
       window.myTSAccountProtection.init([userID]);
     });
   </script>
   <script src="https://cdn.riskid.security/sdk/web_sdk_latest.js" defer="true" />

5. Click Trigger Configuration and then select Initialization - All Pages .
6. Click Save .

Step 4: Report actions via GTM

To obtain risk recommendations for sensitive actions, your application should report these actions using the Detection and Response SDK. To do this with GTM, you need to create a custom tag to send the action to Mosaic.

1. Go to Tags > New .
2. At the top of the page, set a title for the tag page (e.g., Mosaic action ).
3. Click Tag Configuration > Custom HTML .
4. Add the following code to the HTML window, where [transmit_action] is the GTM variable you created for storing user actions in step 2.
   Copy

   Copied

   <script>
     function saveActionTokenToDataLayer(actionResponse) {
           dataLayer.push({"transmit_action":actionResponse.actionToken});
     }
     window.myTSAccountProtection.triggerActionEvent("[transmit_action]").then(saveActionTokenToDataLayer);
   </script>

5. Click the Triggering window and then click + .
6. At the top of the page, set a title for the trigger page (e.g., Mosaic send user action ).
7. Click Trigger Configuration and configure the tag to trigger when a sensitive action is requested in your application. These actions are currently supported: login , register , transaction , password_reset , logout , checkout , account_details_change , account_auth_change , withdraw or credits_change .
8. Click Save .

Step 5: Fetch recommendation

You can fetch recommendations for the reported action using the Recommendation API.

These APIs are authorized using an OAuth access token so you'll need to fetch a token using your client credentials (from step 1). The token should target the following resource: https://risk.identity.security. To do this, send the following request:

  const { access_token } = await fetch(
    `https://api.transmitsecurity.io/oidc/token`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
      body: new URLSearchParams({
        grant_type: client_credentials,
        client_id: [CLIENT_ID],
        client_secret: [CLIENT_SECRET],
        resource: 'https://risk.identity.security'
      })
    }
  );

From your backend, invoke the Recommendation API by sending a request like the one below. The [ACCESS_TOKEN] is the authorization token you obtained using your client credentials and [ACTION_TOKEN] is the actionToken received from the SDK in step 4.

const query = new URLSearchParams({
  action_token: '[ACTION_TOKEN]',
}).toString();

const resp = await fetch(
  `https://api.transmitsecurity.io/risk/v1/recommendation?${query}`,
  {
    method: 'GET',
    headers: {
      Authorization: 'Bearer [ACCESS_TOKEN]',
    },
  }
);

Step 6: Clear user

After the user logs out or the user session expires, you should clear the set user so they are not associated with future actions. To clear the user with GTM, you need to create a custom tag to send the clearUser() event to Transmit:

1. Go to Tags > New .
2. At the top of the page, set a title for the tag page (e.g., Mosaic clear user ).
3. Click Tag Configuration > Custom HTML .
4. Add the following code to the HTML window:
   Copy

   Copied

   <script>
     document.addEventListener("TSAccountProtectionReady", function(e) {
       window.myTSAccountProtection.clearUser();
       console.log("Mosaic user cleared");
     });
   </script>

5. Click the Triggering window and then click + .
6. At the top of the page, set a title for the trigger page (e.g., Mosaic send user action ).
7. Click Trigger Configuration and configure the tag to trigger when the user logs out (e.g., clicks the Logout button).
8. Click Save .