Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add missing CTA tracking attributes #5574

Merged
merged 22 commits into from
Jul 20, 2022
Merged

Add missing CTA tracking attributes #5574

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
5b3f49e
CTA data attributes for /home
Jul 11, 2022
1a7f442
Product page CTAs
Jul 11, 2022
af19c6b
Cont CTA audit fix
Jul 11, 2022
ce1f1a3
Cont CTA audit fix
Jul 11, 2022
b133957
Cont CTA audit fix
Jul 11, 2022
60c2b3a
Unify active tab style
Jul 11, 2022
d5a5f34
Lint/Prettier
Jul 11, 2022
7f4f6a5
Loop through redundant footer links
Jul 12, 2022
78ef819
Prettier/Lint
Jul 12, 2022
448578c
Resolve merge conflict
Jul 13, 2022
4a72827
Merge branch 'main' into cta-audit
Jul 18, 2022
3ff21ad
Update src/components/Layout/Footer.tsx
st0nebreaker Jul 18, 2022
608ca46
Merge branch 'cta-audit' of github.com:sourcegraph/about into cta-audit
Jul 18, 2022
183d15f
Period & tracking attributes
Jul 18, 2022
d9075b5
Rm order css
Jul 18, 2022
826e39f
Leave eslint-ignore comment
Jul 19, 2022
f0cae8f
Add tracking to all links
Jul 19, 2022
cd85c84
Add tracking to missing anchor tags in <Link/>s
Jul 20, 2022
b5a084d
Prettier/Lint
Jul 20, 2022
a3d6185
Resolve merge conflict
Jul 20, 2022
1295f36
Rm unused import
Jul 20, 2022
98ec7c9
Link arrow icon for case studies
Jul 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/components/Actions/ContactPresalesSupportAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ interface Props {

export const ContactPresalesSupportAction: FunctionComponent<Props> = ({ className = '' }) => (
<Link href="/demo" passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className={`d-flex align-items-center text-decoration-none ${className}`}>
<a href="#none" className={`d-flex align-items-center text-decoration-none ${className}`}>
Talk to a product specialist
<ArrowRightBoxIcon className="text-primary ml-1" />
</a>
Expand Down
9 changes: 8 additions & 1 deletion src/components/Blog/BlogHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { FunctionComponent } from 'react'

import Link from 'next/link'

import { buttonStyle, buttonLocation } from '@data'
import { BlogTypeInfo } from '@interfaces/posts'

interface Props extends Pick<BlogTypeInfo, 'title' | 'belowTitle' | 'baseUrl'> {}
Expand All @@ -11,7 +12,13 @@ export const BlogHeader: FunctionComponent<Props> = ({ title, belowTitle, baseUr
<h1 className="display-4 font-weight-bold mt-3">
<Link href={baseUrl} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="text-body">
<a
className="text-body"
title={title}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.hero}
data-button-type="cta"
>
{title}
</a>
</Link>
Expand Down
9 changes: 8 additions & 1 deletion src/components/Blog/LinkPost.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { FunctionComponent } from 'react'
import { MDXRemote } from 'next-mdx-remote'
import Link from 'next/link'

import { buttonStyle, buttonLocation } from '@data'
import { PostComponentProps } from '@interfaces/posts'

interface Props extends PostComponentProps {
Expand Down Expand Up @@ -44,7 +45,13 @@ export const LinkPost: FunctionComponent<Props> = ({
<div className="card-footer bg-transparent border-top-0 pt-0">
<Link href={url} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className={`text-gray-5 ${titleLinkClassName}`}>
<a
className={`text-gray-5 ${titleLinkClassName}`}
title={post.frontmatter.publishDate}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
{post.frontmatter.publishDate}
</a>
</Link>
Expand Down
1 change: 1 addition & 0 deletions src/components/Blog/PodcastListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export const PodcastListItem: FunctionComponent<PostIndexItemProps> = ({
className="text-muted mr-4 font-weight-bold"
target="_blank"
rel="noreferrer"
title="Watch the video"
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
Expand Down
19 changes: 17 additions & 2 deletions src/components/Blog/PostLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
YouTube,
TrySourcegraph,
} from '@components'
import { buttonStyle, buttonLocation } from '@data'
import { PostComponentProps } from '@interfaces/posts'
import { formatDate } from '@util'

Expand Down Expand Up @@ -41,7 +42,13 @@ export const PostLayout: FunctionComponent<PostComponentProps> = ({
{renderTitleAsLink === true ? (
<Link href={url} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className={`d-block ${titleLinkClassName}`} title={post.frontmatter.title}>
<a
className={`d-block ${titleLinkClassName}`}
title={post.frontmatter.title}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
{post.frontmatter.title}
</a>
</Link>
Expand All @@ -56,7 +63,15 @@ export const PostLayout: FunctionComponent<PostComponentProps> = ({
<span key={a.name} data-author={a.name}>
{a.url ? (
a.url.includes('http') ? (
<a href={a.url} target="_blank" rel="nofollow noreferrer">
<a
href={a.url}
target="_blank"
rel="nofollow noreferrer"
title={a.name}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
{a.name}
</a>
) : (
Expand Down
25 changes: 22 additions & 3 deletions src/components/Blog/PostListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,13 @@ export const PostListItem: FunctionComponent<PostIndexItemProps> = ({
{renderTitleAsLink === true ? (
<Link href={`/${blogType}/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className={`d-block ${titleLinkClassName}`} title={frontmatter.title}>
<a
className={`d-block ${titleLinkClassName}`}
title={frontmatter.title}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
{frontmatter.title}
</a>
</Link>
Expand All @@ -40,7 +46,15 @@ export const PostListItem: FunctionComponent<PostIndexItemProps> = ({
<span key={a.name} data-author={a.name}>
{a.url ? (
a.url.includes('http') ? (
<a href={a.url} target="_blank" rel="nofollow noreferrer">
<a
href={a.url}
target="_blank"
rel="nofollow noreferrer"
title={a.name}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
{a.name}
</a>
) : (
Expand Down Expand Up @@ -91,7 +105,12 @@ export const PostListItem: FunctionComponent<PostIndexItemProps> = ({
<div className="col-md-3 d-flex">
<Link href={`/${blogType}/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a>
<a
title={frontmatter.title}
data-button-style={buttonStyle.image}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
<img
className="w-100"
src={
Expand Down
41 changes: 37 additions & 4 deletions src/components/Blog/ReleasePost.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { MDXRemote } from 'next-mdx-remote'
import Link from 'next/link'

import { Alert, Figure } from '@components'
import { buttonStyle, buttonLocation } from '@data'
import { PostComponentProps } from '@interfaces/posts'
import { formatDate } from '@util'

Expand Down Expand Up @@ -42,6 +43,10 @@ export const ReleasePost: FunctionComponent<Props> = ({
href={url}
className="release-post__item d-md-flex list-group-item list-group-item-action"
key={url}
title={`${category}: ${description}`}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
<span className="release-post__item-category mb-2 mb-md-0">
<span className="release-post__item-category-badge">{category}</span>
Expand All @@ -53,14 +58,36 @@ export const ReleasePost: FunctionComponent<Props> = ({

<ul className="card-body list-unstyled d-flex flex-wrap mb-0">
<li className="release-post__help-item">
<a href="https://docs.sourcegraph.com/admin/install">How to install</a>
<a
href="https://docs.sourcegraph.com/admin/install"
title="How to install"
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
How to install
</a>
</li>
<li className="release-post__help-item">
<a href="https://docs.sourcegraph.com/admin/updates">How to upgrade</a>
<a
href="https://docs.sourcegraph.com/admin/updates"
title="How to upgrade"
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
How to upgrade
</a>
</li>
<li className="flex-1" />
<li className="release-post__help-item">
<a href="https://sourcegraph.com/github.com/sourcegraph/sourcegraph/-/blob/CHANGELOG.md">
<a
href="https://sourcegraph.com/github.com/sourcegraph/sourcegraph/-/blob/CHANGELOG.md"
title="Full changelog"
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
Full changelog
</a>
</li>
Expand All @@ -79,7 +106,13 @@ export const ReleasePost: FunctionComponent<Props> = ({
{renderTitleAsLink === true ? (
<Link href={url} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className={`d-block ${titleLinkClassName}`}>
<a
className={`d-block ${titleLinkClassName}`}
title={post.frontmatter.title}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
{post.frontmatter.title}
</a>
</Link>
Expand Down
21 changes: 19 additions & 2 deletions src/components/CaseStudies/CaseStudyLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { FunctionComponent } from 'react'
import { kebabCase } from 'lodash'

import { ContentSection, RequestDemoForm, MediaQuote } from '@components'
import { buttonStyle, buttonLocation } from '@data'

import { CaseStudyJumbotron } from './CaseStudyJumbotron'

Expand Down Expand Up @@ -43,7 +44,14 @@ export const CaseStudyLayout: FunctionComponent<Props> = ({
{heroImage && (
<div className="case-studies__quote row pt-3">
<div className="col-lg-3">
<a href={heroLink} rel="nofollow">
<a
href={heroLink}
rel="nofollow"
title={customer}
data-button-style={buttonStyle.image}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
<img className="img-fluid mx-auto d-block" src={heroImage} alt={customer} />
</a>
</div>
Expand All @@ -59,7 +67,16 @@ export const CaseStudyLayout: FunctionComponent<Props> = ({
)}
{quote && !heroImage && <MediaQuote quote={quote.text} author={quote.author} image={quote.image} />}
{pdf && (
<a href={pdf} className="btn btn-primary mt-3" rel="nofollow noreferrer" target="_blank">
<a
href={pdf}
className="btn btn-primary mt-3"
rel="nofollow noreferrer"
target="_blank"
title="Download PDF"
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
<i className="fa fa-file-pdf pr-2" />
Download PDF
</a>
Expand Down
12 changes: 11 additions & 1 deletion src/components/CaseStudies/NewCaseStudyLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { FunctionComponent } from 'react'
import { kebabCase } from 'lodash'

import { CaseStudyJumbotron, ContentSection, RequestDemoTrySourcegraph, BlockquoteWithLogoTop } from '@components'
import { buttonStyle, buttonLocation } from '@data'

import { CaseStudyCard, CASESTUDIES } from './CaseStudyCard'

Expand Down Expand Up @@ -51,7 +52,16 @@ export const NewCaseStudyLayout: FunctionComponent<Props> = ({
>
<h1 className="pt-5 pb-6 display-2 font-weight-bold max-w-600 mx-auto">{title}</h1>
{pdf && (
<a href={pdf} className="btn btn-primary mt-3" rel="nofollow noreferrer" target="_blank">
<a
href={pdf}
className="btn btn-primary mt-3"
rel="nofollow noreferrer"
target="_blank"
title="Download PDF"
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
<i className="fa fa-file-pdf pr-2" />
Download PDF
</a>
Expand Down
10 changes: 9 additions & 1 deletion src/components/CustomerLogos.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { FunctionComponent } from 'react'

import Link from 'next/link'

import { buttonStyle, buttonLocation } from '@data'

interface Logo {
name: string
src: string
Expand Down Expand Up @@ -75,7 +77,13 @@ export const CustomerLogos: FunctionComponent = () => (
{logos.map((logo: Logo) => (
<Link key={logo.name} href={logo.link ? logo.link : '/case-studies'} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="max-w-100 max-h-100 my-3 mx-4 flex-shrink-0">
<a
className="max-w-100 max-h-100 my-3 mx-4 flex-shrink-0"
title={`${logo.name} logo`}
data-button-style={buttonStyle.image}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
<img
src={logo.src}
alt={`${logo.name} logo`}
Expand Down
1 change: 1 addition & 0 deletions src/components/FeatureWalkthrough/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,7 @@ export const FeatureWalkthrough: FunctionComponent = () => {
target="_blank"
rel="noreferrer"
className="btn btn-outline-primary mt-2"
title={`Learn more about ${startCase(feature.productFeature)}`}
data-button-style={buttonStyle.outline}
data-button-location={buttonLocation.body}
data-button-type="cta"
Expand Down
Loading