Top referring social sites (social traffic detail)

• Type: Story
• Status: In Development
• Priority: Minor
• Resolution: Unresolved
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Content Performance
• Labels:
  • d_20_09
  • fc_20_12
• Epic/Theme:
  • Content_Performance_Analytics
• Epic Link: tango-traffic-sources-from-AC
• Sprint: TANGO | #44 DIS | Aug28-Sep11, TANGO | #50 DEV | Nov27-Dec11

Motivation

When the volume of traffic from other sites linking to the page is significant, it might be an indicator of a successful content strategy. Content authors and marketers spend part of their time on link building, that is, the process of acquiring links from other websites to theirs. As in the full traffic chart the total traffic volume for this source in a given period of time is provided, the detail page will offer the full list of both Top Referring Social Media sites and Top Referring Social Pages sending traffic to the analyzed URL.

Design

https://www.figma.com/file/yfrb3NekENmnnS6SFWWLnq/lps-119486-top-referring-social?node-id=99%3A4576
The icon to be used as the generic (while we have the right ones provided) will be the "share". This will also be the one used for "others".

Finally we won't be using icons, just the names of the social media, for the sake of maintainability.

Colors. We will use colours from the ones defined by Lexicon Charts:

• Twitter.com: $cyan
• Instagram.com: $orange
• LinkedIn.com: $indigo
• youtube.com: $red 
• Facebook.com: $blue
• tiktok.com: $pink
• Pinterest.com: $teal
• Snapchat.com: $yellow 

Technical Requirements

Social info detail will show three sections:

• Interval dropdown selector with Last 7 days and Last 30 days options. This selector will persist the selection that the user has done in the first level.
• Top Referring Social Media will show a chart with incoming traffic volume by the social site for the requested period.
  • Social sites:
    • Twitter.com (must include t.co)
    • Instagram.com
    • LinkedIn.com
    • youtube.com 
    • Facebook.com
    • tiktok.com
    • Pinterest.com
    • Snapchat.com 
  • If one of the social media sites has no results, then it won’t show
  • There will be an “Others” value to show UTM results as well, identified with the generic “Share” icon

• Top Referring Social Pages will list the 5 pages from social sites considered (see LPS-118107) sending most traffic, with traffic volume.
  • Only 5 URLs will be shown at the beginning; the rest of them will be displayed when clicking on a View More link under the list, and can be hidden when clicking on a View less link

Acceptance Criteria

• Given the referring social sites traffic link in the full traffic pie chart in the content performance panel
• When the user clicks on it
• Then s/he's led to the detail page, and the interval selector, traffic volume and traffic share remain the same they were in the first level

–

• Given the detail page of the referring social sites traffic in the content performance panel
• When the user lands
• Then s/he's can see the top Referring Social Media chart and the 5 Top Referring Social Pages

–

• Given the top Referring Social Media chart
• When there is incoming traffic from several social media sites
• Then they're ordered from higher values to lower, but the colors for each SM site remain the same regardless of the position in the list

–

• Given the top Referring Social Media chart
• When there is no incoming traffic from one or several of the considered social media sites
• Then it doesn't show in the list

–

• Given the top Referring Social Media chart
• When there is incoming traffic from URLs tagged with medium or source = social
• Then the sum of them all shows in the list as "Other"

–

• Given the Top Referring Social Pages section
• When the user clicks on the View more link below the list
• Then the hidden 5 top-referring pages display 

–

• Given the Top Referring Social Pages section
• When the user selects one social media site from the list
• Then the 5 or 10 top-referring pages from that SM site display (showing 5 or 10 will depend on whether the view more - view less previous status)

–

• Given the Top Referring Social Pages section
• When the an option from the dropdown is selected and the results for the selection are shown 
• Then the user can click in any non-clickable area, select the default value (All social media) or select another value to exit the selection

–

• Given the Top Referring Social Pages section
• When an option from the dropdown is selected and the results for the selection are shown 
• Then the corresponding bar in the top Referring Social Media chart is highlighted 

–

• Given the list of URLs in the Top Referring Social Pages section
• When user clicks on a URL
• Then the page will open in a new tab