Skip to content
This repository has been archived by the owner on Mar 28, 2023. It is now read-only.

Commit

Permalink
Product signup links (#271)
Browse files Browse the repository at this point in the history
* Remove Hubspot pageview tracking

* Rename lead form to HIPAA guide form

* Refactor UTM param fetching

* Remove modal signup form

* Link all signup CTAs to deploy-ui
  • Loading branch information
mjp authored Apr 20, 2022
1 parent ed49ff5 commit b0dc8a9
Show file tree
Hide file tree
Showing 9 changed files with 61 additions and 129 deletions.
4 changes: 2 additions & 2 deletions src/components/deploy/FeaturePageHero.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Grid } from '../grid/Grid';
import styles from './FeaturePageHero.module.css';
import { LeadForm } from '../lead-form/LeadForm';
import { SignupForm } from '../signup-form/SignupForm';

export default ({ h1, summary, leadFormId }) => (
<div className={styles.container}>
Expand All @@ -11,7 +11,7 @@ export default ({ h1, summary, leadFormId }) => (
{h1}
{summary}
<div className={styles.leadForm}>
<LeadForm id={leadFormId} />
<SignupForm id={leadFormId} />
</div>
</div>
</Grid>
Expand Down
4 changes: 2 additions & 2 deletions src/components/lead-form/LeadForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { navigate } from 'gatsby'
import cn from 'classnames';
import styles from './LeadForm.module.css';
import buttonStyles from '../buttons/Button.module.css';
import { submitHubspotForm, HUBSPOT_FORM_DEMO } from '../../lib/hubspot.js';
import { submitHubspotForm, HUBSPOT_FORM_HIPAA_GUIDE } from '../../lib/hubspot.js';

export const LeadForm = ({
id,
Expand All @@ -26,7 +26,7 @@ export const LeadForm = ({
};

const onSubmit = () => {
const result = submitHubspotForm(HUBSPOT_FORM_DEMO, email, true);
const result = submitHubspotForm(HUBSPOT_FORM_HIPAA_GUIDE, email, true);
if (!result.ok) {
setError(result.message);
return;
Expand Down
71 changes: 22 additions & 49 deletions src/components/signup-form/SignupForm.js
Original file line number Diff line number Diff line change
@@ -1,68 +1,41 @@
import React, { useState } from 'react';
import React from 'react';
import cn from 'classnames';
import styles from './SignupForm.module.css';
import buttonStyles from '../buttons/Button.module.css';
import { submitHubspotForm, HUBSPOT_FORM_PRODUCT_SIGNUP } from '../../lib/hubspot.js';
import { analytics } from '../../lib/aptible';
import Button from '../buttons/Button';

export const SignupForm = ({
id,
btnText = 'Sign Up For Free',
inputPlaceholder = 'Enter your email',
allowPersonalEmails = true,
onSuccess = () => { },
theme = '',
size = '',
}) => {
const [submitted, setSubmitted] = useState(false);
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const onSubmit = () => {
let url = 'https://dashboard.aptible.com/signup';
const utms = analytics.allUtmVars();

const onKeypress = (e) => {
if (e.key === 'Enter') {
onSubmit();
}
};
if (Object.keys(utms).length > 0) {
const params = [];
for (let param in utms) {
params.push(`${param}=${utms[param]}`);
}

const onSubmit = () => {
const result = submitHubspotForm(HUBSPOT_FORM_PRODUCT_SIGNUP, email, allowPersonalEmails);
if (!result.ok) {
setError(result.message);
return;
url += `?${params.join('&')}`;
}

setSubmitted(true);
setError('');
onSuccess();

// Give time for HubSpot & analytics to fire
setTimeout(() => {
window.location = `https://dashboard.aptible.com/signup?email=${encodeURIComponent(email)}`;
}, 250);
window.location = url;
};

return (
<div>
<div
className={styles.signupFormContainer}
style={{ opacity: submitted ? 0 : 1 }}
<Button
className={cn(buttonStyles.button, styles.button)}
onClickFn={onSubmit}
theme={theme}
size={size}
>
<div className={styles.signupForm} id={id}>
<input
required
className={styles.signupFormInput}
onKeyPress={onKeypress}
onChange={e => setEmail(e.target.value)}
type="email"
placeholder={inputPlaceholder}
/>
<button
className={cn(buttonStyles.button, styles.button)}
type="submit"
onClick={onSubmit}
>
{btnText}
</button>
</div>
<div className={styles.error}>{error ? error : ''}</div>
</div>
{btnText}
</Button>
</div>
);
};
50 changes: 13 additions & 37 deletions src/components/signup/SignupButton.js
Original file line number Diff line number Diff line change
@@ -1,38 +1,14 @@
import React from 'react';
import Button from '../buttons/Button';
import Signup from '../signup/Signup';

class SignupButton extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
};
}

openForm() {
this.setState({ open: true });
}

closeForm() {
this.setState({ open: false });
}

render() {
return (
<>
<Button
onClickFn={() => this.openForm()}
theme={this.props.theme}
size={this.props.size}
>
{this.props.text}
</Button>

{this.state.open && <Signup product="deploy" closeFn={() => this.closeForm()} />}
</>
);
}
}

export default SignupButton;
import SignupForm from '../signup-form';

const SignupButton = ({
text = 'Sign Up For Free',
theme = '',
size = '',
}) => {
return (
<SignupForm btnText={text} theme={theme} size={size} />
);
};

export default SignupButton
8 changes: 0 additions & 8 deletions src/html.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,6 @@ export default function HTML(props) {
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}

<script
type="text/javascript"
id="hs-script-loader"
async
defer
src="//js.hs-scripts.com/20235662.js"
/>
</body>
</html>
);
Expand Down
20 changes: 16 additions & 4 deletions src/lib/aptible/analytics.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import * as cookies from './cookies.js';


export const utmVars = [
'utm_source',
'utm_medium',
'utm_campaign',
'utm_content',
'utm_term',
'gclid',
];

Expand Down Expand Up @@ -40,10 +44,18 @@ export function getParam(key) {
export function allUtmVars() {
let utms = {};

const params = allParams();
for (let key in params) {
if (utmVars.indexOf(key) !== -1) {
utms[key] = params[key];
// First grab them from the cookies
for (let param of utmVars) {
if (cookies.get(param)) {
utms[param] = cookies.get(param);
}
}

// Then take them from the URL (and overwrite cookie values if necessary)
const urlParams = allParams();
for (let param of utmVars) {
if (urlParams[param]) {
utms[param] = urlParams[param];
}
}

Expand Down
25 changes: 2 additions & 23 deletions src/lib/hubspot.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const HUBSPOT_ACCOUNT_ID = '20235662';
const HUBSPOT_COOKIE = 'hubspotutk';

export const HUBSPOT_FORM_PRODUCT_SIGNUP = '9ff54b8a-a71e-464c-95e5-a7fff6511cac';
export const HUBSPOT_FORM_DEMO = '87365f9e-d16c-4df4-92a1-8cae85d67bd7';
export const HUBSPOT_FORM_HIPAA_GUIDE = '87365f9e-d16c-4df4-92a1-8cae85d67bd7';
export const HUBSPOT_FORM_AWS_ACTIVATE = '04eddc8b-cadb-416a-869f-8d5d1f518b40';

const validateEmail = (email, allowPersonalEmails) => {
Expand All @@ -23,11 +23,6 @@ const validateEmail = (email, allowPersonalEmails) => {
};

const generateField = (field, value) => {
// Rename gclid for HubSpot
if (field === 'gclid') {
field = 'hs_google_click_id';
}

return {
objectTypeId: '0-1', // 0-1 is used for Contacts
name: field,
Expand All @@ -36,23 +31,7 @@ const generateField = (field, value) => {
};

const addUtmsToFields = (fields) => {
const utms = {};

// First grab them from the cookies
for (let param of analytics.utmVars) {
if (cookies.get(param)) {
utms[param] = cookies.get(param);
}
}

// Then take them from the URL (and overwrite cookie values if necessary)
const urlUtms = analytics.allUtmVars();
for (let param of analytics.utmVars) {
if (urlUtms[param]) {
utms[param] = urlUtms[param];
}
}

const utms = analytics.allUtmVars();
for (let param in utms) {
fields.push(generateField(param, utms[param]));
}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/p/hipaa-readiness-in-deploy.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import classnames from 'classnames';
import Title from './components/Title';
import Video from './components/Video';
import Testimonial from './components/Testimonial';
import LeadForm from '../../components/lead-form';
import SignupForm from '../../components/signup-form';
import styles from './VideoLandingPage.module.css';

export default () => {
Expand All @@ -32,7 +32,7 @@ export default () => {
/>

<div className={styles.formWrapper}>
<LeadForm
<SignupForm
id="HIPAA Readiness Video Campaign - 1"
inputPlaceholder="Enter your work email"
/>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/p/hitrust-readiness-in-deploy.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import classnames from 'classnames';
import Title from './components/Title';
import Video from './components/Video';
import Testimonial from './components/Testimonial';
import LeadForm from '../../components/lead-form';
import SignupForm from '../../components/signup-form';

import styles from './VideoLandingPage.module.css';

Expand Down Expand Up @@ -33,7 +33,7 @@ export default () => {
/>

<div className={styles.formWrapper}>
<LeadForm
<SignupForm
id="HITRUST Readiness Video Campaign - 1"
inputPlaceholder="Enter your work email"
/>
Expand Down

0 comments on commit b0dc8a9

Please sign in to comment.