Deeplink URLs presented as Top Pages in the Behavior dashboard

In the Behavior dashboard, we present the top pages for a project instrumented with Product Analytics.

Being able to directly click through to these URLs would improve out the UX experience in addition to simply being a quality-of-life improvement.

We have the information in Cube to be able to fill out the full URL path, so it would likely require an additional Cube request to be able to piece the document host and path together, and then modify the visualization to be able to link to the pages that are being reported on.

Implementation plan

Modify the visualization

• Modify product_analytics/visualizations/top_pages.json:
  • Add a second dimension "TrackedEvents.url" to return the full page URL
  • Add a new options config to this visualization, and update the schema JSON to document this option.

"links": [
      {
        "text": "TrackedEvents.docPath",
        "href": "TrackedEvents.url"
      }
    ]

This allows visualizations to group pairs of dimensions together as links.

Update the data_source

• in panels_base.vue pass through this.visualization.options to the data source fetch call
• in cube_analytics.js use the options in convertToTableFormat inside the mapping code.
  • omit any row with a key that is contained in links as a href
    This means we will not display TrackedEvents.url as its own column
  • any rows with a key contained in links as a text will be mapped to return an object as a value, instead of a string
    The object will contain text and href, where text is the value for TrackedEvents.docPath and href is the value for TrackedEvents.url

Update the visualization

• in visualizations/data_table.vue add a new isLink method which returns true if the value is a { text, href } object instead of a string
• modify the <gl-table> and specify a slot to customise the content rendering
• render a link if isLink, else render the raw value

Tests

• yes