Header+Footer: log GA events on download(s)

This commit is contained in:
rektdeckard
2020-10-10 01:17:23 -04:00
parent 079633d8f6
commit ae9e71886b
2 changed files with 44 additions and 16 deletions

View File

@@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { ArrowElbowDownRight, Coffee, Heart } from "phosphor-react"; import { ArrowElbowDownRight, Coffee, Heart } from "phosphor-react";
import { OutboundLink } from "react-ga";
import uArrowUpLeft from "../../assets/u-arrow-up-left.svg"; import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
import markerGreen from "../../assets/marker-green.svg"; import markerGreen from "../../assets/marker-green.svg";
@@ -37,25 +38,35 @@ const Footer: React.FC<FooterProps> = () => {
<div className="links"> <div className="links">
<div> <div>
<ArrowElbowDownRight size={24} /> <ArrowElbowDownRight size={24} />
<a <OutboundLink
className="nav-link" className="nav-link"
href="https://phosphoricons.com/assets/phosphor-icons.zip" to="https://phosphoricons.com/assets/phosphor-icons.zip"
eventLabel="Download all"
download download
type="application/zip"
> >
Download all Download all
</a> </OutboundLink>
</div> </div>
<div> <div>
<ArrowElbowDownRight size={24} /> <ArrowElbowDownRight size={24} />
<a className="nav-link" href="#"> <OutboundLink
className="nav-link"
to="#"
eventLabel="Figma library"
>
Figma library Figma library
</a> </OutboundLink>
</div> </div>
<div> <div>
<ArrowElbowDownRight size={24} /> <ArrowElbowDownRight size={24} />
<a className="nav-link" href="#"> <OutboundLink
className="nav-link"
to="#"
eventLabel="Figma plugin"
>
Figma plugin Figma plugin
</a> </OutboundLink>
</div> </div>
<div> <div>
<ArrowElbowDownRight size={24} /> <ArrowElbowDownRight size={24} />
@@ -73,7 +84,10 @@ const Footer: React.FC<FooterProps> = () => {
Donate on PayPal Donate on PayPal
</a> </a>
{" / "} {" / "}
<a className="nav-link" href="https://patreon.com/phosphoricons"> <a
className="nav-link"
href="https://patreon.com/phosphoricons"
>
Patreon Patreon
</a> </a>
</span> </span>

View File

@@ -4,6 +4,7 @@ import {
ArrowCircleDown, ArrowCircleDown,
ArrowElbowDownRight, ArrowElbowDownRight,
} from "phosphor-react"; } from "phosphor-react";
import { OutboundLink } from "react-ga";
import "./Header.css"; import "./Header.css";
import markerPurple from "../../assets/marker-purple.svg"; import markerPurple from "../../assets/marker-purple.svg";
@@ -76,25 +77,35 @@ const Header: React.FC<HeaderProps> = () => {
<div className="links"> <div className="links">
<div> <div>
<ArrowElbowDownRight size={24} /> <ArrowElbowDownRight size={24} />
<a <OutboundLink
className="nav-link" className="nav-link"
href="https://phosphoricons.com/assets/phosphor-icons.zip" to="https://phosphoricons.com/assets/phosphor-icons.zip"
eventLabel="Download all"
download download
type="application/zip"
> >
Download all Download all
</a> </OutboundLink>
</div> </div>
<div> <div>
<ArrowElbowDownRight size={24} /> <ArrowElbowDownRight size={24} />
<a className="nav-link" href="#"> <OutboundLink
className="nav-link"
to="#"
eventLabel="Figma library"
>
Figma library Figma library
</a> </OutboundLink>
</div> </div>
<div> <div>
<ArrowElbowDownRight size={24} /> <ArrowElbowDownRight size={24} />
<a className="nav-link" href="#"> <OutboundLink
className="nav-link"
to="#"
eventLabel="Figma plugin"
>
Figma plugin Figma plugin
</a> </OutboundLink>
</div> </div>
<div> <div>
<ArrowElbowDownRight size={24} /> <ArrowElbowDownRight size={24} />
@@ -112,7 +123,10 @@ const Header: React.FC<HeaderProps> = () => {
Donate on PayPal Donate on PayPal
</a> </a>
{" / "} {" / "}
<a className="nav-link" href="https://patreon.com/phosphoricons"> <a
className="nav-link"
href="https://patreon.com/phosphoricons"
>
Patreon Patreon
</a> </a>
</span> </span>