Create a DataDog APM integration page (#790)

* Add DataDog APM page

* Fix spelling

Co-authored-by: Jamie Sinn <jamie@devcycle.com>

* Move rollbar images to rollbar folder

* Include Feature data sending to APM

* Fix Spelling

* Update results section on APM page

---------

Co-authored-by: Jamie Sinn <jamie@devcycle.com>

docs/integrations/datadog-apm.md

@@ -0,0 +1,59 @@
+---
+title: DataDog APM
+
+---
+
+DevCycle's clientside Javascript SDKs - including JS and React, can be easily integrated with [DataDog APM](https://docs.datadoghq.com/tracing/) - enhacing visibility into DataDog Traces by supplementing it with data from DevCycle.
+
+![Datadog APM Dashboard](/integrations/datadog-apm/datadog-apm-dashboard.png)
+
+## Configuration
+
+The DevCycle APM integration provides Traces with more depth by passing in DevCycle Feature and/or Variable data during its time of execution, allowing Developers to get a better understanding of the performance impact of each Feature.
+
+### Sending Feature Data
+
+To add Feature data to Traces, we'll retrieve all of our Feature and Variation data using a DevCycle SDK and add that data as metadata to the active Trace. In our example, we send the Feature key and Variation name to DataDog. This can be customized to your liking.
+
+
+``` javascript
+const features = devcycleClient.allFeatures()
+
+const span = tracer.scope().active();
+if (span) {
+    const rootSpan = span.context()._trace.started[0];
+    Object.entries(features).forEach(([key, metadata]) => {
+        rootSpan?.setTag(key, metadata['variationName']);
+    });
+}
+```
+
+### Sending Variable Data
+
+To add DevCycle Variables to Traces, we'll retrieve Variable data from a DevCycle SDK and add that data as metadata to the active Trace. A simple way to pass along multiple Variables and its values to DataDog is shown below.
+
+``` javascript
+const variableA = devcycleClient.variable('new-homepage-hero', 'defaultValue');
+const variableB = devcycleClient.variable('new-homepage-layout', 'defaultValue');
+
+const variables = {
+    variableA: variableA.value,
+    variableB: variableB.value,
+}
+
+const span = tracer.scope().active();
+if (span) {
+    const rootSpan = span.context()._trace.started[0];
+    Object.entries(variables).forEach(([key, value]) => {
+        rootSpan?.setTag(key, value);
+    });
+}
+```
+
+## Results
+
+DevCycle data will then appear in the span within your traces. In our example, we're passing a `devcycle` object containing the Variable and Variable value combination that's relevant to the current action.
+
+![Datadog APM Spam Metadata](/integrations/datadog-apm/datadog-apm-span.png)
+
+That's it! Check out our [DataDog RUM integration](/integrations/datadog-rum) to see how we can help you enhance your RUM metrics using DevCycle Feature and Variable data.

docs/integrations/datadog-rum.md

@@ -1,5 +1,5 @@
 ---
-title: DataDog
+title: DataDog RUM
 sidebar_position: 3
 ---
 

docs/integrations/index.mdx

@@ -172,10 +172,17 @@ DevCycle APIs, as well as third party integrations to connect DevCycle to the to
     {
       type: 'link',
       href: '/integrations/datadog-rum',
-      label: 'DataDog Feature Tracking',
+      label: 'DataDog RUM Feature Tracking',
       description: 'Associate served feature flags with RUM sessions',
       icon: 'simple-icons:datadog',
     },
+    {
+      type: 'link',
+      href: '/integrations/datadog-apm',
+      label: 'DataDog APM Feature Tracking',
+      description: 'Associate served feature flags with APM logs and metrics',
+      icon: 'simple-icons:datadog',
+    },
     {
       type: 'link',
       href: '/integrations/snowflake',
@@ -198,7 +205,7 @@ DevCycle APIs, as well as third party integrations to connect DevCycle to the to
       description:
         'Enhance error logging with DevCycle Feature and Variable data',
       icon: '',
-      customIconPath: '/integrations/rollbar-icon.svg'
+      customIconPath: '/integrations/rollbar/rollbar-icon.svg'
     }
   ]}
 />

docs/integrations/rollbar.md

@@ -119,6 +119,6 @@ try {
 
 Rollbar service links allow you to create links that connect directly with DevCycle, to provide easy access to Features and Variables from the Rollbar interface.
 
-![Screenshot of Service Link from Rollbar](/integrations/rollbar-service-link.png)
+![Screenshot of Service Link from Rollbar](/integrations/rollbar/rollbar-service-link.png)
 
 To learn how to create service links for DevCycle, visit the Rollbar docs [here](https://docs.rollbar.com/docs/service-links#devcycle).