> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mixpanel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tealium

This guide demonstrates how to set up Mixpanel event tracking and identity management with [Tealium's IQ Tag Management Platform](https://tealium.com/resource/datasheet/tealium-iq/). Setup should take about 10 minutes, and will go over the following 5 steps:

1. Configuring Tag Hooks (one-time)
2. Connecting Mixpanel to Tealium (one-time)
3. Sending Events
4. Adding Event Properties
5. Identifying Users (one-time)

### Prerequisite: Tag Hooks

Tealium’s iQ Tag Management creates event streams fueled by [UDOs](https://docs.tealium.com/platforms/javascript/universal-data-object/) (Universal Data Objects).

For web applications, UDOs are just javascript objects with a special shape; they are automatically detected by the [Tealium utag SDK](https://docs.tealium.com/platforms/javascript/universal-tag/), and they look like this:

```javascript theme={"system"}
var utag_data = {
  "tealium_event": "page_view",
  // ^ the key is always 'tealium_event'
  // values will depend on your tealium implementation; standards: https://docs.tealium.com/platforms/javascript/track/#tealium_event

  //UDOs can contain any number of custom params
  "foo: "bar",
  "baz": "qux" 
}
```

In order to trigger Mixpanel events based on the values of `tealium_event`s, you’ll need to create a variable in Tealium’s data layer for `tealium_event` (the key not the value).

**This is a very common implementation pattern in Tealium**; if you’ve been using tealium for a while, you most likely have already mapped a UDO for `tealium_event` ... if you haven’t, here are the steps:

Find "data layer" in the main menu:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/LSnTJ-J777r9Qkr8/images/c99badbe-8755-42c6-8052-0af1dd873a44.png?fit=max&auto=format&n=LSnTJ-J777r9Qkr8&q=85&s=55cd238d4ac74f5c05d78ba8d08babf1" alt="01-dataLayerMenu" width="220" height="115" data-path="images/c99badbe-8755-42c6-8052-0af1dd873a44.png" />
</Frame>

Click "add variable":

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/O5CFUc6kGJpeLxIg/images/ec812663-885f-4568-95c6-f61cfb22315c.png?fit=max&auto=format&n=O5CFUc6kGJpeLxIg&q=85&s=b221c17f81244716de8c19a15fc59d68" alt="02-addVar" width="340" height="57" data-path="images/ec812663-885f-4568-95c6-f61cfb22315c.png" />
</Frame>

The type is "UDO Variable"; the source is "tealium\_event" ... then click apply:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/LSnTJ-J777r9Qkr8/images/b810e6f3-8316-4045-9aab-b4a1f05163e8.png?fit=max&auto=format&n=LSnTJ-J777r9Qkr8&q=85&s=607379d306ff5277f86dffbc4b36d56c" alt="03-UDOVar" width="595" height="308" data-path="images/b810e6f3-8316-4045-9aab-b4a1f05163e8.png" />
</Frame>

Now save and publish!

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/976a8c20-ef40-4c0b-9d7d-d5cfdb1baec2.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=214ee22153435cb784458b3b7c1646ca" alt="04-SavePublish" width="130" height="44" data-path="images/976a8c20-ef40-4c0b-9d7d-d5cfdb1baec2.png" />
</Frame>

You should now see a "tealium\_event" variable in your UDOs:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/O5CFUc6kGJpeLxIg/images/d4d4f6e3-7ee2-4ac3-a6a7-cdb5c6c1b12f.png?fit=max&auto=format&n=O5CFUc6kGJpeLxIg&q=85&s=7c1a268d3af3aa1bf009ca51c333e76b" alt="05-TealiumEvent" width="460" height="325" data-path="images/d4d4f6e3-7ee2-4ac3-a6a7-cdb5c6c1b12f.png" />
</Frame>

( ^ it should look exactly like this! ^)

You are now ready to setup mixpanel events with triggers based on the *values* passed to `tealium_event` ... these values are usually strings like `page_view` , `product_view`, `search` etc...

## Connecting Mixpanel to Tealium

* Find the **tags** section of iQ Tag Manager:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/96522330-67a8-437e-bb6e-3fd2cc89df27.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=3de630ffa4b03347e114d9107d53c4b8" alt="06-NewTags" width="220" height="183" data-path="images/96522330-67a8-437e-bb6e-3fd2cc89df27.png" />
</Frame>

* Click **add tags** and find 'mixpanel' using the search

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/88f75984-4717-475b-bdaf-85156fbc33f8.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=48e938bb99b2e5b24085206bc02e116e" alt="07-AddTag" width="220" height="48" data-path="images/88f75984-4717-475b-bdaf-85156fbc33f8.png" />
</Frame>

* Click **add** to bring the Mixpanel tag into your Tealium workspace.

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/5hQDmq4cJsrPPF4r/images/ad7b8de6-727c-43e6-a21f-50e3713af16c.png?fit=max&auto=format&n=5hQDmq4cJsrPPF4r&q=85&s=711ba3189e52118277ef57b6d807c48d" alt="08-Mixpanel" width="820" height="219" data-path="images/ad7b8de6-727c-43e6-a21f-50e3713af16c.png" />
</Frame>

You can now connect your Mixpanel project to Tealium and configure the tag's behavior.

You will need a [mixpanel account](https://mixpanel.com/register/) and a [mixpanel project](/docs/admin/organizations-projects/manage-projects) to continue.

In the first section of the tag wizard, enter your [**mixpanel project token**](https://help.mixpanel.com/hc/en-us/articles/115004502806-Find-Project-Token-) and click Next:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/272c360b-74ab-4561-b321-54faca49845e.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=42b11053536e01e26212730d01145f27" alt="09-ConnectingTags" width="545" height="461" data-path="images/272c360b-74ab-4561-b321-54faca49845e.png" />
</Frame>

Next, you’ll setup **load rules** which determine which pages mixpanel will be deployed on.

In order for the mixpanel tag to appear on your pages, you will need to add a condition to your **[load rules](https://docs.tealium.com/iq-tag-management/load-rules/about/)** using the wizard. Load rules make it possible to conditionally apply tags in certain cases, based on variables and conditions that Tealium is aware of.

For testing, it’s perfectly fine to say "load on all pages":

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/78f6ce2d-6546-48f2-834a-ea48e981999c.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=ce92aabaf56aa3d1cc5b5da972d00c66" alt="10-LoadRules" width="740" height="162" data-path="images/78f6ce2d-6546-48f2-834a-ea48e981999c.png" />
</Frame>

Mixpanel should now be deployed on all known Tealium pages of your site. Next, you will set up mappings which fire Mixpanel events based on mappings created in Tealium.

## Sending Events

The final section of the tag wizard is where **[data mappings](https://docs.tealium.com/iq-tag-management/data-mappings/about/)** are configured.
Data mappings are *essentially* a GUI-driven configuration that *will compose and deploy javascript snippets* on your Tealium-tagged pages (if the load rules are met).

That the goal of this guide is to turn something of this form:

```javascript theme={"system"}
var utag_data = {	"tealium_event": "page_view" }
```

Into the equivalent javascript:

```javascript theme={"system"}
mixpanel.track('hello from tealium!')
```

When a user loads the page.

Here’s how you can setup this mapping:

* Use the `tealium_event` UDO variable to tell Tealium to pass `tealium_event` *values* to the mixpanel tag:

* Click "variables" dropdown and choose "tealium\_event"

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/LSnTJ-J777r9Qkr8/images/c8c32537-50ac-4af1-ba36-a8be34bd9180.png?fit=max&auto=format&n=LSnTJ-J777r9Qkr8&q=85&s=3f84d0bf194a56c54eef9059aa80b997" alt="11-Variables" width="395" height="137" data-path="images/c8c32537-50ac-4af1-ba36-a8be34bd9180.png" />
</Frame>

* Bind the trigger `page_view` (from the UDO `tealium_event`) *to* the mixpanel method `track`:

* Click 'add’ when it looks like this... and then done

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/O5CFUc6kGJpeLxIg/images/e98f5fa3-8cf6-4be8-8a21-8ebcacdff277.png?fit=max&auto=format&n=O5CFUc6kGJpeLxIg&q=85&s=a54bfa07123bf01f73653ae0c05fc0a7" alt="12-Categories" width="480" height="129" data-path="images/e98f5fa3-8cf6-4be8-8a21-8ebcacdff277.png" />
</Frame>

* You should now have this binding:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/96d8e794-0979-441a-be68-c2cfb471630b.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=3604b49b9bc4b3822e007ed16dfe03f4" alt="13-Binding" width="400" height="61" data-path="images/96d8e794-0979-441a-be68-c2cfb471630b.png" />
</Frame>

This will track the UDO `page_view` wherever it appears on our site.

Next, give the event a name in mixpanel...

For this tutorial, we’ll use a **[custom value](https://docs.tealium.com/iq-tag-management/data-mappings/about/#custom-value-mapping)** ... this is added as another variable in tealium’s data mapper:

* Click "variables" drop down and choose use custom value:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/523c41dd-fe1f-42a5-b960-7212f7889693.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=a2a922503e4dd8afb6870bd20eb9e606" alt="14-CustomValue" width="405" height="314" data-path="images/523c41dd-fe1f-42a5-b960-7212f7889693.png" />
</Frame>

* Define your "custom value"

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/Y6MSfzF-TDZ89Tu0/images/11e51314-042e-41a8-ad06-eae042cd1747.png?fit=max&auto=format&n=Y6MSfzF-TDZ89Tu0&q=85&s=246c3eb3db94723b07f9f085a91b9b64" alt="15-CustomText" width="215" height="93" data-path="images/11e51314-042e-41a8-ad06-eae042cd1747.png" />
</Frame>

* Now, in the **event parameters** menu bind our custom value `hello... from tealium` to the `eventName` for `track`:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/31a484d3-247f-4dfc-8c48-f0bf1dc78ad2.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=67981aa3199836be9a817efe233f49fb" alt="16-AddAndDone" width="505" height="223" data-path="images/31a484d3-247f-4dfc-8c48-f0bf1dc78ad2.png" />
</Frame>

* Click "add" and "done" when you’ve mapped your custom value to Track : Event Name

Our final mapping now looks like this:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/LSnTJ-J777r9Qkr8/images/c5c1f92b-2c74-4313-8df0-f76a5c046e41.png?fit=max&auto=format&n=LSnTJ-J777r9Qkr8&q=85&s=657326d3e78b9bbe7fd3e03d27e7bb0b" alt="17-FinalMapping" width="495" height="202" data-path="images/c5c1f92b-2c74-4313-8df0-f76a5c046e41.png" />
</Frame>

If your screen looks similar, you’re ready to save and publish!

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/O5CFUc6kGJpeLxIg/images/e18e645a-58ff-479e-b731-062d2f346b0a.png?fit=max&auto=format&n=O5CFUc6kGJpeLxIg&q=85&s=d8343e6d735c6b1ab0cf17a786fce18b" alt="18-SaveAndDone" width="130" height="44" data-path="images/e18e645a-58ff-479e-b731-062d2f346b0a.png" />
</Frame>

Wait a couple moments for tealium to apply the updates to your environment, and then load one of your pages (that has this tag deployed)

Pop open the developer console in your browser... you can see two requests to mixpanel:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/4b41ba9a-d669-4ac7-80de-00b273644d95.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=477e7598789aaa405e413a101307eefb" alt="19-debugging" width="440" height="47" data-path="images/4b41ba9a-d669-4ac7-80de-00b273644d95.png" />
</Frame>

If you’re using a [tealium browser extension debugger,](https://chrome.google.com/webstore/detail/tealium-tools/gidnphnamcemailggkemcgclnjeeokaa?hl=en-US) or have forced the utag into [debug mode by modifying the cookie](https://docs.tealium.com/platforms/javascript/debugging/#debug-mode):

```jsx theme={"system"}
document.cookie="utagdb=true";
```

You can see the tag’s rendering states:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/5hQDmq4cJsrPPF4r/images/ac51bae7-d4b4-45d0-817a-1053a6ef7763.png?fit=max&auto=format&n=5hQDmq4cJsrPPF4r&q=85&s=6de1a0b1320f0e951eafd442fbc0db8d" alt="20-debugStates" width="845" height="160" data-path="images/ac51bae7-d4b4-45d0-817a-1053a6ef7763.png" />
</Frame>

Or... you can skip all that debugging noise and just go to mixpanel, and click into the [events report](https://help.mixpanel.com/hc/en-us/articles/4402837164948-Events-formerly-Live-View-) to see your new fresh event!

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/28dfb81d-4a72-4177-938c-109a6194e981.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=dfc7a3d4633feaaf851c0b8c32360f30" alt="21-MixpanelEvents" width="475" height="428" data-path="images/28dfb81d-4a72-4177-938c-109a6194e981.png" />
</Frame>

You just implemented Tealium → Mixpanel. You will repeat this process for additional events you wish to create.

## Adding Event Properties

Because Tealium wraps the Mixpanel JS SDK, Mixpanel's [default event properties](/docs/data-structure/property-reference#default-properties) will be including on every event.

Any "custom" event properties will need to be mapped within Tealium using he following structure: **MY UDO ⇒**  **`track.properties.KEY_NAME`** where `KEY_NAME` is the **label** you want to use for the **property key in mixpanel**... the **value** will be the value of the UDO at runtime:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/2772f1dc-45b7-4089-92bf-f042ac61bdff.gif?s=8640ccda0b909369c9b424ca2512aaf1" alt="22-NewProps" width="754" height="114" data-path="images/2772f1dc-45b7-4089-92bf-f042ac61bdff.gif" />
</Frame>

A single event may have many custom properties mapped; that might look like this:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/4878ea4e-c2fa-4bc7-b5f5-72da3f969a08.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=dc38269a82b4de7a69e5bf6500ad6333" alt="23-MultipleMappings" width="450" height="274" data-path="images/4878ea4e-c2fa-4bc7-b5f5-72da3f969a08.png" />
</Frame>

Adding event properties is as simple as modifying the existing mapping to an event, and saving and publishing. Once you trigger your new tag you will the correct UDO value *and* the label you specified in the mapper show up in mixpanel

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/41d27add-4d89-424d-830e-ba978e3b17f6.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=8430486e9782e468c536854c54b6be83" alt="24-SuccessfulEvent" width="670" height="203" data-path="images/41d27add-4d89-424d-830e-ba978e3b17f6.png" />
</Frame>

Note: you can always rename property keys' display labels [in lexicon](https://help.mixpanel.com/hc/en-us/articles/360001307806-Lexicon-Overview#adding-or-changing-descriptions)

## Identifying Users

**Important:** cross device tracking assumes you know the identity of the current user.. **`identify()`** should *only* be called on "authenticated" (logged in) pages/actions.

Ultimately, we are trying to get Tealium to render this tag:

```js theme={"system"}
mixpanel.identify(uniqueUserId)
```

Where `uniqueUserId` is a string value that refers to the canonical user id for the current ("logged in") user.

It’s critically important that this value uniquely identifies the end-user, across all devices they may have.

**Note:** some customer are tempted to use an email address as a unique identifier; this is (generally) not a good identifier, especially if users can change their email address... the value you pass to `identify` should never change for a single user.

* Assuming we have a UDO (or other javascript variable) that points to our UUID (unique user identifier)

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/O5CFUc6kGJpeLxIg/images/d916c42d-5055-48ee-9fc1-11c547ac3b03.png?fit=max&auto=format&n=O5CFUc6kGJpeLxIg&q=85&s=1d1c1843432149a4815f29c842077c5a" alt="25-IdentityStart" width="575" height="73" data-path="images/d916c42d-5055-48ee-9fc1-11c547ac3b03.png" />
</Frame>

* Next, instruct Tealium when to use our `identify` tag... this is similar to how we used `page_view:track` directive to tell tealium to call `.track()` on the "tealium event" "page\_view" ... you will probably use some other UDO event here (like `log in` or `sign in`):

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/5hQDmq4cJsrPPF4r/images/a1cc3d9e-ff89-4491-a9b5-6d565ac68b4a.png?fit=max&auto=format&n=5hQDmq4cJsrPPF4r&q=85&s=6bf66747b4ddf5b65a79ef229e654a1b" alt="26-IdentityMap" width="515" height="60" data-path="images/a1cc3d9e-ff89-4491-a9b5-6d565ac68b4a.png" />
</Frame>

* Select the `id_of_user` UDO (or whatever value represents our UUID for the end user) in the dropdown and proceed to **SELECT DESTINATION**

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/Y6MSfzF-TDZ89Tu0/images/202e8a8c-8229-4c20-b8e8-5bf468e1d95b.png?fit=max&auto=format&n=Y6MSfzF-TDZ89Tu0&q=85&s=7305870f881b3466f6c05db796b4ad8a" alt="27-IdentityAdd" width="575" height="282" data-path="images/202e8a8c-8229-4c20-b8e8-5bf468e1d95b.png" />
</Frame>

* Finally, map the `id_of_user` value to `event parameters` for the `identify` event and choose the specific parameter `unique ID` ... then click **ADD**

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/89ae1139-7c65-4cf7-af0c-d8f6076a351c.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=04f61f77f8671754f37508bd08955a8e" alt="28-IdentityFinish" width="960" height="267" data-path="images/89ae1139-7c65-4cf7-af0c-d8f6076a351c.png" />
</Frame>

A final implementation of mixpanel within Tealium might look like this:

<Frame>
  <img src="https://mintcdn.com/mixpanel-edb78807/2dQbP7q9Vb6iLUv1/images/7f5426d4-bbe3-4686-bfcd-e776b4475482.png?fit=max&auto=format&n=2dQbP7q9Vb6iLUv1&q=85&s=f4b0c3cf84f2af97a52891337a4d8a82" alt="29-SampleComplete" width="545" height="575" data-path="images/7f5426d4-bbe3-4686-bfcd-e776b4475482.png" />
</Frame>
