[ANALYTICS-116] Show analytics in an IUX slot Created: 15/Jan/20  Updated: 21/Jan/21  Resolved: 19/Feb/20

Status: Closed
Project: Analytics
Component/s: None
Affects Version/s: None
Fix Version/s: 1.1

Type: Story Priority: Major
Reporter: Antti Hietala Assignee: Oanh Thai Hoang
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 3d 7h
Original Estimate: Not Specified

Attachments: Zip Archive analytics-view-example.zip     PNG File iux analytics horizontal panel.png     PNG File mockup.png    
Issue Links:
Relates
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Documentation update required:
Yes
Date of First Response:
Epic Link: Analytics IUX slot
Sprint: Add-Ons 31
Story Points: 5

 Description   

Show page performance metrics from Google Analytics in the horizontal IUX slot above the workbench in the Pages app.


 
User stories

As a Magnolia Product Manager, I want to demonstrate an IUX example out of the box, so that customers understand how IUX adds value. I want to fulfill the promise that Connector Packs take integrations to the UI level.

As a Marketer, I want to see common page performance metrics inside Magnolia, so that I don’t have to switch to another tool.

As a Developer, I want to see a fully functional IUX integration example, so that I can follow the example and make my own integrations available to Magnolia users.

As a Magnolia administrator, when I install and configure the Google Analytics Connector, I want to see metrics displayed in an IUX slot by default, so that I can see the connector is working correctly.

Acceptance criteria

  • Use the horizontal IUX slot above the workbench in the Pages app.
  • Use the Google Analytics connector from the Analytics Connector Pack.
  • Display page metrics in slot.
  • Split vertical screen real estate 50/50 between IUX slot and list of pages.

 
Optional

  • Let the user choose other metrics from dropdown: Users, Sessions, Bounce Rate
  • Add two select boxes
    1. Choose btw different metrics e.g. page views, returning visitors, new visitors
    2. Date range (can use the one from find bar)

Fallbacks

  • If no page node is selected, display an empty graph (only axes, no line)
  • If no analytics data is available, display an empty graph (only axes, no line)

Data

  • Take data from Google Analytics. The view ID for demo.magnolia-cms.com is 24199737. Put it in the datasource configuration.


 Comments   
Comment by Antti Hietala [ 21/Jan/20 ]

Tips from mdivilek:

Any view implementing UiFrameworkView could be inserted into the slot. Implement a new view for displaying the data, which would benefit from value context and can switch displayed data whenever selected item changes.

Example for displaying page node name:

package info.magnolia.ui.framework.app.extension;
import info.magnolia.ui.contentapp.browser.context.ValueContext;
import info.magnolia.ui.framework.ConfiguredViewDefinition;
import info.magnolia.ui.framework.UiFrameworkView;
import javax.inject.Inject;
import javax.jcr.Node;
import com.machinezoo.noexception.Exceptions;
import com.vaadin.ui.Composite;
import com.vaadin.ui.Label;
/**
 * Complex data view :).
 */
public class DataView extends Composite implements UiFrameworkView {
    @Inject
    public DataView(ValueContext<Node> valueContext) {
        Label pageTitle = new Label();
        valueContext.observe(() -> {
            Node node = valueContext.getSingleOrThrow();
            pageTitle.setValue(Exceptions.wrap().get(node::getName));
        });
        setCompositionRoot(pageTitle);
    }
    private static class Definition extends ConfiguredViewDefinition<DataView> {
        public Definition() {
            setImplementationClass(DataView.class);
        }
    }
}

This is the part which triggers update when selection changes (valueContext.observe …)

valueContext.observe(() -> {
    Node node = valueContext.getSingleOrThrow();
    pageTitle.setValue(Exceptions.wrap().get(node::getName));
});
Comment by Julie Legendre [ 25/Feb/20 ]

Thank you Oanh, I've created ANALYTICS-122 for the docs.

Generated at Sun Feb 11 23:15:41 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.