Displaying analytics in an IUX slot

In addition to viewing analytics charts in the Analytics app, you can display them next to the content they apply to in IUX (Integrated User eXperience) slots.

IUX slots are extension panels in the browser subapp. The panel allows you to configure a list of extension views in the workbench and replaces info.magnolia.ui.workbench.contenttool.ContentToolDefinition of Magnolia 5 UI.

The first slot, introduced in Magnolia 6.2, is a wide horizontal slot at the top of content apps such as the Pages app.

Use decoration to configure the:

  • Extension panel in the Pages app (see extensionViews for configuration and properties).

  • Charts to be displayed.

  • Data suppliers providing the analytics data.

Use the Refresh icon Refresh button in the Analytics app dashboard to clear the cache of the data supplier providing the data displayed in the IUX slot.

IUX slot filter configuration examples

  • Adobe Analytics

  • Google Analytics 4

  • Matomo

Filter configuration example for Adobe Analytics.

Refer to the instructions on the How to configure Adobe Analytics data in an IUX slot with filters page first. Some configuration in your Adobe Launch interface is required to enable Adobe Analytics in Magnolia IUX slots.
pages-app.subApps.browser.workbench.yaml
extensionViews:
  - name: analytics1
    icon: icon-analytics-app
    view:
      name: analytics
      $type: analyticsView
      chartDefinitions:
        - name: adobePageViews
          label: "Total Adobe Page Views"
          class: info.magnolia.analytics.amcharts.data.AmChartDefinition
          dataSupplier: adobePageViewsDataSupplier
          chartType: !include:/analytics-ui/chartTypes/line-and-area/line-different-colors-ups-downs.yaml
            series:
              - name: series
                dataFields:
                  - name: categoryX
                    jsonPath: "$.rows[*].value"
                  - name: valueY
                    jsonPath: "$.rows[*].data[0]"
            xAxes: !override
              - name: xaxe
                renderer:
                  labels:
                    truncate: true
                    maxWidth: 90 #maxWidth can be change due to your config, exp: 120 instead of 90
        - name: adobeMetricFilter
          label: "Adobe Page Views With Metric Filters"
          class: info.magnolia.analytics.amcharts.data.AmChartDefinition
          dataSupplier: adobeMetricFilterDataSupplier
          chartType: !include:/analytics-ui/chartTypes/line-and-area/line-different-colors-ups-downs.yaml
            series:
              - name: series
                dataFields:
                  - name: categoryX
                    jsonPath: "$.rows[*].value"
                  - name: valueY
                    jsonPath: "$.rows[*].data[0]"
            xAxes: !override
              - name: xaxe
                renderer:
                  labels:
                    truncate: true
                    maxWidth: 90

      dataSuppliers:
        adobePageViewsDataSupplier:
          class: info.magnolia.analytics.adobe.datasource.AdobeDataSupplier
          credentials:
            parameters:
              serviceUrl: https://analytics.adobe.io/api/xxxxxxxxxxxx/reports
              clientId: <your-client-id>
              clientSecret: <your-client_secret>
              companyId: <your-company-id>
              orgId: xxxxxxx@AdobeOrg
              scope: <your-scopes>
              technicalAccountId: xxxxxx@techacct.adobe.com
              imsHost: https://ims-na1.adobelogin.com
              imsExchange: https://ims-na1.adobelogin.com/ims/token/v3
          parameters:
            rsid: xxxxxxxx
            gFilterType: dateRange
            metricId: metrics/pageviews
            dimension: variables/evar3 #This is just an example, variables need to be configured to map with pageName or pageUrl
          filteringSubSetExpression:
            clause: CONTAINS '%s' #selected node path
        adobeMetricFilterDataSupplier:
          class: info.magnolia.analytics.adobe.datasource.AdobeDataSupplier
          credentials:
            parameters:
              serviceUrl: https://analytics.adobe.io/api/xxxxxxxxxxxx/reports
              clientId: <your-client-id>
              clientSecret: <your-client_secret>
              companyId: <your-company-id>
              orgId: xxxxxxx@AdobeOrg
              scope: <your-scopes>
              technicalAccountId: xxxxxx@techacct.adobe.com
              imsHost: https://ims-na1.adobelogin.com
              imsExchange: https://ims-na1.adobelogin.com/ims/token/v3
          parameters:
            rsid: xxxxxxxx
            gFilterType: dateRange
            metricId: metrics/pageviews
            dimension: variables/daterangeday
          metricFiltersExpression:
            - id: 0
              type: breakdown
              dimension: variables/evar1 #This is just an example, variables need to be configured to map with pageName or pageUrl
              itemValue: "%s" #selected node path
            - id: 1
              type: dateRange

      filterFields:
        - name: startDate
          $type: dateField
        - name: endDate
          $type: dateField

Search parameter options for report filtering

The Adobe search parameters documentation indicates that Adobe Analytics provides the following search parameter options:

  • itemId - A single ID to include in the report.

  • itemIds - A list of itemIds to include in the report.

  • excludeItemIds - A list of itemIds to exclude in the report.

  • clause - A search clause to use when filtering dimensions.

  • includeSearchTotal - Includes a special element called searchTotals in the response that contains the total of the filtered items. The default is false.

For example:

filteringSubSetExpression:
  clause: CONTAINS '%s'
filteringSubSetExpression:
  itemIds: 1200002,1200003
  includeSearchTotal: true

Breakdown Reports

The Adobe Analytics breakdown reports documentation indicates that breakdowns in the API are useful when you want to see the cross-product of values from two different dimensions. When requesting a breakdown report, use the metricsFilters and dimension parameters to request the additional dimension.

Breakdown reports include the following options:

  • id

  • type

  • dimension

  • itemValue

  • itemId

  • segmentId

  • dateRange

For example:

metricFiltersExpression:
  - id: 0
    type: breakdown
    dimension: variables/evar1
    itemValue: "%s" #selected node path
  - id: 1
    type: dateRange

Filter configuration example for GA4.

The configuration in this decoration file (with the relevant credentials added) results in charts displayed in an IUX slot at the top of the Pages app for the Travel Demo pages.

pages-app.subApps.browser.workbench.yaml
extensionViews:
  - name: analytics1
    icon: icon-analytics-app
    view:
      name: analytics
      $type: analyticsView
      chartDefinitions:
        - name: active28DayUsers
          label: GA Active 28 Days Users
          class: info.magnolia.analytics.amcharts.data.AmChartDefinition
          dataSupplier: gaActive28DayUsersSupplier
          chartType: !include:/analytics-ui/chartTypes/line-and-area/line-different-colors-ups-downs.yaml
            series:
              - name: series
                dataFields:
                  - name: categoryX
                    jsonPath: $.rows.[*].dimensionValues.[*].value
                  - name: valueY
                    jsonPath: $.rows.[*].metricValues.[*].value
        - name: sessions
          label: GA Sessions
          class: info.magnolia.analytics.amcharts.data.AmChartDefinition
          dataSupplier: gaSessionsSupplier
          chartType: !include:/analytics-ui/chartTypes/line-and-area/line-different-colors-ups-downs.yaml
            series:
              - name: series
                dataFields:
                  - name: categoryX
                    jsonPath: $.rows.[*].dimensionValues.[*].value
                  - name: valueY
                    jsonPath: $.rows.[*].metricValues.[*].value
Refer to the chart types and properties sections for detailed information about configuring chartDefinitions.

IUX slot

Filter configuration example for Matomo.

Matomo uses segments to configure filtering Matomo Segmentation in the API.

Not all segments work in Matomo. We recommend you check your segment is working in your Matomo dashboard first by following the instructions in the Matomo documentation before configuring your IUX slot in Magnolia. See How to build custom segments in Matomo.
pages-app.subApps.browser.workbench.yaml
extensionViews:
  - name: analytics1
    icon: icon-analytics-app
    view:
      name: analytics
      $type: analyticsView
      chartDefinitions:
        - name: PopularMediaLast24H
          label: PopularMediaLast24H
          class: info.magnolia.analytics.amcharts.data.AmChartDefinition
          dataSupplier: popularMediaLast24HMatomoSupplier
          chartType: !include:/analytics-ui/chartTypes/line-and-area/simple-line.yaml
            series:
              - name: series
                type: LineSeries
                dataFields:
                  - name: categoryX
                    jsonPath: $..label
                  - name: valueY
                    jsonPath: $..value
            xAxes: !override
              - name: xaxe
                renderer:
                  labels:
                    truncate: true
                    maxWidth: 90

      dataSuppliers:
        popularMediaLast24HMatomoSupplier:
          class: info.magnolia.analytics.matomo.datasource.MatomoDataSupplierWithTransformer
          credentials:
            parameters:
              serverUrl: https://demo.matomo.org
              tokenAuth: anonymous
          parameters:
            module: API
            method: MediaAnalytics.getCurrentMostPlays
            idSite: 2
            date: yesterday
            period: day
            format: json
            filter_limit: 10
            lastMinutes: 1440
          filteringSubSetExpression:
            segment: pageUrl=@%s

      filterFields:
        - name: startDate
          $type: dateField
        - name: endDate
          $type: dateField

IUX slot

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the DX Core docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules