Skip to content

Commit

Permalink
Add missing CTA tracking attributes (#5574)
Browse files Browse the repository at this point in the history 
* CTA data attributes for /home

* Product page CTAs

* Cont CTA audit fix

* Cont CTA audit fix

* Cont CTA audit fix

* Unify active tab style

* Lint/Prettier

* Loop through redundant footer links

* Prettier/Lint

* Update src/components/Layout/Footer.tsx

Co-authored-by: Brett Hayes <[email protected]>

* Period & tracking attributes

* Rm order css

* Leave eslint-ignore comment

* Add tracking to all links

* Add tracking to missing anchor tags in <Link/>s

* Prettier/Lint

* Rm unused import

* Link arrow icon for case studies

Co-authored-by: Becca Steinbrecher <[email protected]@Beccas-MacBook-Pro.local>
Co-authored-by: Brett Hayes <[email protected]>
  • Loading branch information
@st0nebreaker @bretthayes
3 people authored Jul 20, 2022
1 parent 59f743d commit 214c827
Show file tree
Hide file tree
Showing 65 changed files with 2,032 additions and 513 deletions.
32 changes: 28 additions & 4 deletions src/components/Blockquote.tsx
View file
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
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
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
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
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
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

0 comments on commit 214c827

Please sign in to comment.