Create a Page Orientation prop for Adobe Analytics

Sharing is Caring

Creating a “Page Orientation” prop within Adobe Experience Platform Data Collection can be a useful way to track the orientation of a webpage and use that information to trigger specific actions or events. In this blog post, we’ll walk you through the process of creating a “Page Orientation” prop using custom code in Adobe Experience Platform.

Before we get started, it’s important to note that creating a “Page Orientation” prop will require some familiarity with AEP, as well as some basic knowledge of JavaScript and web development. If you are not familiar with these technologies, you may want to consider learning more about them before attempting to create a “Page Orientation” prop.

Determine the values that you want to track

Before you can create a “Page Orientation” prop, you need to determine the values that you want to track. In this case, we’ll be tracking the orientation of a webpage, which can be either “Landscape”, “Portrait”, or “Square”.

Create the Browser Size data elements

Once you have determined the values that you want to track, you’ll need to create Data Elements for the user’s browser inner height and width. To do this, follow these steps:

  1. Log in to your Adobe Experience Platform account.

  2. Navigate to the “Data Elements” page.

  3. Click on the “Create Data Element” button.

  4. In the “Create Data Element” screen, enter a name for your browser window data element (e.g. “Browser window.innerHeight”) and select the “JavaScript Variable” option in the “Data Element Type” dropdown.

  5. In the “JavaScript variable name” field, enter the code that defines the browser’s innerHeight (window.innerHeight) and returns the desired value.
    Click the checkbox for ‘Clean text’ and then save the Data Element.

  6. Create another Data Element, this time for the browser window.Innerwidth

    Click the checkbox for ‘Clean text’ and then save the Data Element.

  7. Now that we have Data Elements for both the browser height & width, we can create Conditional Value Data Elements to return the values we want to track.


    For Landscape:

    For Portrait:

    For Square:

  8. Now that we have our 3 Page Orientation Values tracked, we need to create some Custom JavaScript code to return the defined orientation into it’s own Data Element.

    Create a new Custom Code Data Element and use the following JavaScript to return the correct value.

    var value1 = _satellite.getVar("Page Orientation - Landscape");
    var value2 = _satellite.getVar("Page Orientation - Portrait");
    var value3 = _satellite.getVar("Page Orientation - Square");

    if (value1 !== undefined) {
    return value1;
    } else if (value2 !== undefined) {
    return value2;
    } else if (value3 !== undefined) {
    return value3;
    } else {
    return 'Undefined';
    }

    Save the Custom Code Data Element

  9. Now that we have our Page Orientation Data Element, it can be used in your Adobe Experience Platform Rules, such as an Adobe Analytics Page Load Rule

 

By following the steps outlined here, you should be able to create a “Page Orientation” prop in Adobe Analytics and use it to trigger specific actions or events based on the orientation of the webpage. Whether you’re looking to optimize your webpage for different screen sizes, trigger specific marketing campaigns, or simply track page orientation data for analysis, the “Page Orientation” prop can be a valuable addition to your implementation.

More To Explore

Analytics

Unlocking PPC Success: Why a Data-Driven Consulting Approach is Key

Pay-per-click (PPC) advertising is one of the most effective ways to drive traffic to your website and generate leads and sales for your business. However, many businesses struggle to get the most out of their PPC campaigns, and end up wasting a lot of money on ineffective ads. That’s where PPC consulting comes in. In this blog post, we’ll explore what PPC consulting is, why it’s important, and how a data-driven approach can be the key to success.

Analytics

Set vs. Array in JavaScript: Understanding the Differences and Use Cases

JavaScript provides developers with several data structures to store and manipulate collections of values. Two commonly used data structures are sets and arrays. In this blog post, we’ll explore the differences between sets and arrays, their advantages and disadvantages, and some common use cases for each.

We're Here To Help

Request An Audit

Feel free to contact us, and we will be more than happy to answer all of your questions.