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 all commits
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
32 changes: 28 additions & 4 deletions src/components/Blockquote.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,28 @@ export const BlockquoteWithLogoBottom: FunctionComponent<{
)}
{link &&
(link.href.includes('http') ? (
<a href={link.href} target="_blank" rel="nofollow noreferrer">
<a
href={link.href}
target="_blank"
rel="nofollow noreferrer"
title={link.text}
data-button-style={buttonStyle.textWithArrow}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
{link.text}
<ArrowRightIcon className="ml-1" />
</a>
) : (
<Link href={link.href} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="d-flex justify-content-center mt-3">
<a
className="d-flex justify-content-center mt-3"
title={link.text}
data-button-style={buttonStyle.textWithArrow}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
<p className="font-weight-bold">{link.text}</p>
<ArrowRightIcon className="ml-1" />
</a>
Expand Down Expand Up @@ -105,7 +119,8 @@ export const Blockquote: FunctionComponent<{
{logo &&
(logo.href ? (
<Link href={logo.href} passHref={true}>
<a href="#none" className="btn">
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="btn">
<img src={logo.src} width="110px" alt={logo.alt} />
</a>
</Link>
Expand All @@ -116,7 +131,15 @@ export const Blockquote: FunctionComponent<{
))}
{link &&
(link?.href.includes('http') ? (
<a href={link.href} target="_blank" rel="nofollow noreferrer">
<a
href={link.href}
target="_blank"
rel="nofollow noreferrer"
title={link.text}
data-button-style={buttonStyle.textWithArrow}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
{link.text}
<ArrowRightIcon className="ml-1" />
</a>
Expand All @@ -125,6 +148,7 @@ export const Blockquote: FunctionComponent<{
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a
className="d-flex justify-content-center mt-3"
title={link.text}
data-button-style={buttonStyle.textWithArrow}
data-button-location={buttonLocation.body}
data-button-type="cta"
Expand Down
11 changes: 10 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,15 @@ 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">{title}</a>
<a
className="text-body"
title={title}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.hero}
data-button-type="cta"
>
{title}
</a>
</Link>
</h1>

Expand Down
23 changes: 21 additions & 2 deletions 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 All @@ -24,7 +25,17 @@ export const LinkPost: FunctionComponent<Props> = ({
const titleClassName = 'text-base link-post__html d-inline'
const title = post.frontmatter.canonical ? (
<h2 className={titleClassName}>
<Link href={post.frontmatter.canonical}>{post.frontmatter.title}</Link>
<Link href={post.frontmatter.canonical} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a
title={post.frontmatter.title}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
{post.frontmatter.title}
</a>
</Link>
</h2>
) : (
<h2 className={titleClassName}>{post.frontmatter.title}</h2>
Expand All @@ -44,7 +55,15 @@ 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}`}>{post.frontmatter.publishDate}</a>
<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>
</div>
</Tag>
Expand Down
35 changes: 32 additions & 3 deletions src/components/Blog/PodcastListItem.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 Link from 'next/link'

import { PostListItem, PodcastAudioPlayer } from '@components'
import { buttonStyle, buttonLocation } from '@data'
import { PostIndexItemProps } from '@interfaces/posts'

/**
Expand Down Expand Up @@ -45,23 +46,51 @@ export const PodcastListItem: FunctionComponent<PostIndexItemProps> = ({
<div>
<Link href={`/podcast/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="text-muted mr-4 font-weight-bold">Permalink</a>
<a
className="text-muted mr-4 font-weight-bold"
title="Permalink"
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
Permalink
</a>
</Link>

<Link href={`/podcast/${slugPath}#notes`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="text-muted mr-4 font-weight-bold">Show notes</a>
<a
className="text-muted mr-4 font-weight-bold"
title="Show notes"
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
Show notes
</a>
</Link>
<Link href={`/podcast/${slugPath}#transcript`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="text-muted mr-4 font-weight-bold">Transcript</a>
<a
className="text-muted mr-4 font-weight-bold"
title="Transcript"
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
Transcript
</a>
</Link>
{frontmatter.videoID && (
<a
href={`https://www.youtube.com/v/${frontmatter.videoID}`}
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"
>
Watch the video
</a>
Expand Down
44 changes: 40 additions & 4 deletions src/components/Blog/PostLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,17 @@ import { FunctionComponent } from 'react'
import { MDXRemote } from 'next-mdx-remote'
import Link from 'next/link'

import { Alert, Blockquote, EmbeddedHubSpot, Figure, TableWrapper, Video, YouTube, TrySourcegraph } from '@components'
import {
Alert,
Blockquote,
EmbeddedHubSpot,
Figure,
TableWrapper,
Video,
YouTube,
TrySourcegraph,
} from '@components'
import { buttonStyle, buttonLocation } from '@data'
import { PostComponentProps } from '@interfaces/posts'
import { formatDate } from '@util'

Expand Down Expand Up @@ -32,7 +42,15 @@ 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}`}>{post.frontmatter.title}</a>
<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>
) : (
post.frontmatter.title
Expand All @@ -45,11 +63,29 @@ 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>
) : (
<Link href={a.url}>{a.name}</Link>
<Link href={a.url} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a
title={a.name}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
{a.name}
</a>
</Link>
)
) : (
a.name
Expand Down
50 changes: 45 additions & 5 deletions src/components/Blog/PostListItem.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 { truncate } from 'lodash'
import Link from 'next/link'

import { buttonStyle, buttonLocation } from '@data'
import { PostIndexItemProps } from '@interfaces/posts'
import { formatDate } from '@util'

Expand All @@ -24,7 +25,15 @@ 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}`}>{frontmatter.title}</a>
<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>
) : (
frontmatter.title
Expand All @@ -37,11 +46,29 @@ 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>
) : (
<Link href={a.url}>{a.name}</Link>
<Link href={a.url} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a
title={a.name}
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
{a.name}
</a>
</Link>
)
) : (
a.name
Expand Down Expand Up @@ -72,15 +99,28 @@ export const PostListItem: FunctionComponent<PostIndexItemProps> = ({
<div className="text-center text-sm-left">
<Link href={`/${blogType}/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="font-weight-bold">Read more</a>
<a
className="font-weight-bold"
title="Read more"
data-button-style={buttonStyle.text}
data-button-location={buttonLocation.body}
data-button-type="cta"
>
Read more
</a>
</Link>
</div>
</div>

<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
Loading