Transformers

Data Elements and Transformation Functions are two of the core building blocks of data when implementing your tags with MagicPixel. Data Elements helps us specify where our data will come from (like cookies, data layer, server headers, etc..) but that is where the similarities end.

Why Transformation Functions?

There are situations where you will have the data layer value return an object and need to convert it into a variety of other formats to be used within tags or provider attributes. The standard approach for other tag managers is to create more data elements and format the value each time. This results in the same piece of data being redefined in various places, and if the source data changes, you will have to update all the places where it is being read and massaged to different formats. This is where transformation functions play a major role. A transformation function can take any number of data elements as inputs, format the data, and return it in a different format required for a dynamic template parameter.

Creating Transformation Function

Let's create a transformation function example and see how this can be used. For creating a transformation function, we will be following the below steps,

1. Navigate to "Transformers" in the left-side navigation

2. Click on the "Add Transformer" - "for Browser" option. (Learn more about client side and server side transformation functions)

3. Enter a function name and description for your transformation function

   1. Name = demoFunction

   2. Description = This transformation function does the following, 1) Transforms the url to upper case 2) Reads the document title and appends to the url with a separator 3) Returns the final value

4. Under the function arguments section, choose data elements which will be provided as an input to your transformation function. All the data elements passed here will be available as input arguments inside the functions - Choose the function inputs shown in the demo video below

5. Under the code section of transformation function, you can write simple transformation function or a complex one including array manipulations to format, change or combine the input values being sent to the function

   1. Code - return input.url.toUpperCase() + ':' + input.docTitle;

6. Click on "Save" to save your new transformation function. You are now ready to use this in a tag or provider