HomeGuidesAPI ReferenceGraphQL
Submit Documentation FeedbackJoin Developer CommunityOptimizely GitHubOptimizely NuGetLog In

Implement the ODP JavaScript tag

The Optimizely Data Platform (ODP) JavaScript tag helps you track your website events (like page views) and customer information.

The first step to set up ODP is implementing your ODP JavaScript tag on your site. This allows you to track visitors on your site and then store that data for reporting and segmentation within ODP.

Implement the tag on your site

There are two options from which you can choose to implement the tag on your site:

📘

Note

Implementing the tag (regardless of which option you choose), only tracks page view events. To track additional events (like orders and product detail view), you need to implement custom JavaScript, either directly on your site or through GTM.

Implement the tag directly from ODP

To add your ODP JavaScript tag directly from ODP to your site:

  1. Go to Account Settings > Integrations.
  2. Click Javascript Tag.
  3. Click Copy to Clipboard.
  4. Paste the JavaScript tag on every page you would like to track events and customer information. We recommend placing the snippet before the closing </head> element of your site.

Implement the tag using GTM

To add your ODP JavaScript tag to your site using GTM:

  1. Copy the ODP JavaScript tag.
    1. Go to Account Settings > Integrations.
    2. Click Javascript Tag.
    3. Click Copy to Clipboard.
  2. Add the ODP JavaScript tag to GTM.
    1. In Google Tag Manager, click New Tag.
    2. Enter a name for the tag (such as ODP JS tag).
    3. Click the Tag Configuration section and select Custom HTML.
    4. Paste the ODP JavaScript tag into the HTML field.
    5. Click the Triggering section and select All Pages to capture data from every page view.
    6. Click Save.

      📘

      Note

      Ensure that Tag Sequencing specifies that any other custom tags fire after the ODP JavaScript tag.

(Optional) Track additional events by creating custom HTML tags in GTM

After you implement the ODP JavaScript tag using GTM, you can create additional custom HTML tags in GTM to capture more robust customer behaviors and events. For each implementation, configure triggers and variables that define when to fire the tags and what data to put in them.

Configure customer identification events (customer log in/account creation)

zaius.event("customer", 
   {
      action: "login",
      customer_id: "{{YOUR_VARIABLE_FOR_CUSTOMER_ID}}", //or other identifier
      email:"{{YOUR_VARIABLE_FOR_EMAIL}}", 
   }
);

Configure product interactions (product detail view and cart events)

zaius.event("product", 
   {
      action: "detail",
      customer_id: "{{YOUR_VARIABLE_FOR_CUSTOMER_ID}}",//note: or other identifier
      email:"{{YOUR_VARIABLE_FOR_EMAIL}}",  //note if email is not available do not send it
      product_id: "{{YOUR_VARIABLE_FOR_PRODUCT_ID"}}
   }
);

Configure orders

Use a custom JavaScript variable and the eCommerce data layer in GTM to implement this call.

The output of the variable should send an event like the following to ODP:

zaius.event("order", {
   action: "purchase",
   customer_id: "zaius-342", //or other identifier
   order: {
      order_id: "OR345",
      total: 109.65,
      discount: 5.00,
      subtotal: 103.00,
      tax: 5.15,
      shipping: 6.50,
      coupon_code: "5OFF",
      items: [
      {
         product_id: "2045",
         price: 19.00,
         quantity: 5,
         discount: 0.00,
         subtotal: 95.00
      }, {
         product_id: "2091",
         price: 10.00,
         quantity: 1,
         discount: 2.00,
         subtotal: 8.00
       }
     ]
   }
});

Locate and update your Tracker ID

The ODP JavaScript tag contains a Tracker ID, which is unique per ODP account. You can find this tag in three places on the Account Settings > Integrations page:

  1. At the top right of the page
  2. Within the Javascript tag integration tile, below the JavaScript tag
  3. In the JavaScript tag between cloudfront.net/v2/ and /zaius-min.js

📘

Update the Tracker ID in your JavaScript tag

If you have a test environment and a production environment, you will have one Tracker ID for each.

In this case, you can add the tracker ID as an appSettings key in your web.config. This allows you to easily update the tracker ID in a single location that will then update the tag in all locations on your site to specify either the test or the production environment.

Verify that you properly installed the tag

If you are not seeing any of the website events, verify that you have installed the ODP JavaScript tag properly and that it is firing correctly.

  1. Go to Account Settings > Integrations and copy your Tracker ID.
  2. Open a page on your website and right-click anywhere on the page.
  3. Select View page source or View source.
  4. Use CTRL+F or CMD+F to search for the tracking ID that you copied.

The Tracker ID displays

If the Tracker ID displays, verify that the ODP JavaScript tag matches the tag that displays in Account Settings > Integrations > Javascript Tag. If the tag is correct, but you are still not seeing any website events in ODP, verify that the tag is firing:

  1. Open a page on your website and right-click anywhere on the page.
  2. Select Inspect Element or Inspect. This will open your browser's developer tool console.
  3. Click the Network tab, then refresh your page.
  4. Click the Name column to sort the elements alphabetically, then look for zaius-min.js.
  5. Next to zaius-min.js, you should see 304 Not Modified or 200 OK in the Status column.

    📘

    Note

    If you see any other status or the .js code is not found, your ODP JavaScript tag may not be firing correctly. Contact support for further troubleshooting steps and assistance.

The Tracker ID does not display

If the Tracker ID and tag do not display or are incorrect, refer to the first section in this article to implement it properly.


Did this page help you?