Role: Front-end

Context: This site. Session information redraws the sources in the GA4 report so they can sit with the other interface work.

The decision

Session information has to read in the same type and color as the rest of the site, and each row has to say how that visit arrived. The session totals stay in GA.

What I owned

• The layout: a dimension switch, one row per source, and a note for the row you select.
• The rows already in the property: (direct) / (none), copy_link / page_share, new.express.adobe.com / referral, and ig / social.
• The switch between source / medium, source, and medium. The same rows render in each view. Below 900px they stack as cards.

Design system pieces

The live module uses the system this site ships from. The dimension switch is the same pill control as the pricing periods. Type, accent, and surfaces come from the tokens.

How someone else reuses it

A new report passes a new list of sources. Each source is a source, a medium, and one sentence about how it arrived. The tabs, the table, and the note stay.

Shipped

TrafficReport takes those rows. Selecting a row explains the arrival. copy_link / page_share is this site's Copy link button. The Adobe row is a referrer with no UTM. ig / social is a tagged link, and it is not the Instagram share button on this site, which would read instagram / page_share. The production version of keeping a campaign on a path is the registration path. The same-session record is on the system page.