everbridge-marketo-googlead.../Thought Labs - Google Ads Landing Page Template.html
2021-01-19 11:43:05 -05:00

213 lines
18 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<script>
// set up the data layer to ensure it's available in case the
// GTM async code times out or fails before we need it
window.dataLayer = window.dataLayer || [];
// save the Marketo Lead ID so we can push to a GA custom dimension
// for reporting - doing this here instead of in a GTM 1st-party cookie
// variable as variable substitution happens server-side!
dataLayer.push({
'MarketoLeadID': `{{lead.id}}`
})
</script>
<!-- Google Optimize: Anti-flicker snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-52VWLDP':true});</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-52VWLDP');</script>
<!-- End Google Tag Manager -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta class="mktoBoolean" mktoName="Header Type" id="headerType" default="true" true_value="split" false_value="full" true_value_name="Split Banner" false_value_name="Full Banner">
<meta class="mktoString" mktoName="Banner Title (split banner only)" id="bannerTitle" default="Overall Page Title Here">
<meta class="mktoBoolean" mktoName="Use Form" id="useForm" default="true" true_value="" false_value="display: none;" true_value_name="Yes" false_value_name="No">
<meta class="mktoString" mktoName="Form Title" id="formTitle" default="Reserve Your Seat">
<meta class="mktoString" mktoName="Main Content Title" id="contentTitle" default="{{my.Event Name}}">
<!--
<meta class="mktoString" mktoName="Event Date" id="eventDate" default="{{my.Event Date Time}}">
<meta class="mktoBoolean" mktoName="Use Agenda" id="useAgenda" default="true" true_value="" false_value="display: none;" true_value_name="Yes" false_value_name="No">
<meta class="mktoString" mktoName="Agenda Text" id="agendaCopy" default="Download a copy of the Agenda">
<meta class="mktoString" mktoName="Agenda Link" id="agendaLink" default="#">
-->
<meta class="mktoBoolean" mktoName="Use Video" id="useVideo" default="true" true_value="" false_value="display: none;" true_value_name="Yes" false_value_name="No">
<meta class="mktoString" mktoName="Video Embed URL" id="videoEmbedURL" default="#">
<meta class="mktoBoolean" mktoName="Use Speakers" id="useSpeakers" default="true" true_value="" false_value="display: none;" true_value_name="Yes" false_value_name="No">
<meta class="mktoString" mktoName="Speakers Title" id="speakersTitle" default="Event Speakers">
<!--
<meta class="mktoBoolean" mktoName="Use Sponsor" id="useSponsor" default="true" true_value="" false_value="display: none;" true_value_name="Yes" false_value_name="No">
<meta class="mktoString" mktoName="Sponsor Title" id="sponsorTitle" default="Sponsor">
<meta class="mktoBoolean" mktoName="Use Register Button CTA" id="useRegisterCTA" default="true" true_value="" false_value="display: none;" true_value_name="Yes" false_value_name="No">
<meta class="mktoString" mktoName="Register Button CTA Text" id="registerCTA" default="Register Now">
<meta class="mktoBoolean" mktoName="Use Phone 1" id="usePhone1" default="true" true_value="" false_value="display: none;" true_value_name="Yes" false_value_name="No">
<meta class="mktoString" mktoName="Phone 1 Country" id="phone1Country" default="US">
<meta class="mktoString" mktoName="Phone 1 Number" id="phone1Number" default="1-888-366-4911">
<meta class="mktoBoolean" mktoName="Use Phone 2" id="usePhone2" default="true" true_value="" false_value="display: none;" true_value_name="Yes" false_value_name="No">
<meta class="mktoString" mktoName="Phone 2 Country" id="phone2Country" default="UK">
<meta class="mktoString" mktoName="Phone 2 Number" id="phone2Number" default="44 0880 035 0081">
<meta class="mktoBoolean" mktoName="Use Phone 3" id="usePhone3" default="true" true_value="" false_value="display: none;" true_value_name="Yes" false_value_name="No">
<meta class="mktoString" mktoName="Phone 3 Country" id="phone3Country" default="DE">
<meta class="mktoString" mktoName="Phone 3 Number" id="phone3Number" default="49-89-206021-425">
-->
<title></title>
<link href="https://go.everbridge.com/rs/everbridge/images/favicon-2015.ico" rel="shortcut icon" type="image/x-icon">
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="/favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://go.everbridge.com/rs/004-QSK-624/images/2020-landing-ev.css">
<style type="text/css">
.site-header {
background-image: url('https://go.everbridge.com/rs/004-QSK-624/images/Marketo-Event-Landing-Page-Banner-Background-Placeholder.jpg');
}
</style>
</head>
<body>
<div class="pre-header">
<div class="content">
<img src="https://go.everbridge.com/rs/004-QSK-624/images/color-everbridge-logo.png" alt="everbridge logo" class="logo mktoImg" id="logoImg" mktoName="Logo Image" />
</div>
</div>
<header class="site-header split ${headerType}" role="banner">
<div class="content">
<div class="title">
<h1>${bannerTitle}</h1>
</div>
<div class="img">
<img src="https://go.everbridge.com/rs/004-QSK-624/images/Marketo-Event-Landing-Page-Banner-Placeholder.png" class="mktoImg" id="bannerFg" mktoName="Main Banner Image" />
</div>
</div>
</header>
<main>
<div class="content">
<div class="callout form" style="${useForm}" id="registrationJump">
<h2>${formTitle}</h2>
<div class="mktoForm" id="registrationForm" mktoName="Registration Form"></div>
</div>
<div class="description">
<h1>${contentTitle}</h1>
<div class="event-writeup mktoText" id="eventDescription" mktoName="Event Description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo ipsum, sodales ac est non, congue vulputate felis. Aliquam pretium libero eget faucibus eleifend. Nulla vulputate, libero nec feugiat vestibulum, ipsum tellus sollicitudin mi, et euismod justo dolor id nulla. Vivamus sit amet vestibulum ex. Sed tincidunt placerat est, hendrerit bibendum lectus laoreet in. Quisque in blandit massa, ut feugiat mi. Etiam faucibus tortor imperdiet odio sollicitudin maximus. Sed suscipit tristique ipsum eget luctus. Donec eu ante vel justo dapibus aliquam. Nullam volutpat purus vitae quam cursus, a tempus neque ultrices. Sed odio tellus, tempus sit amet auctor in, gravida nec nisl. Nulla commodo libero ipsum, nec porta turpis tincidunt eu. Suspendisse id magna nec mauris commodo egestas a eget neque. Sed rhoncus sed turpis nec efficitur.</p>
<p>Suspendisse ac enim a nisl finibus pulvinar. In hac habitasse platea dictumst. Donec condimentum tortor id quam aliquet, nec imperdiet lacus ultrices. Sed eu erat eu elit dapibus rutrum. Aliquam in quam quis tortor fermentum faucibus vel eget tellus. Morbi consequat nibh sollicitudin odio hendrerit vehicula. Donec porta risus vel ligula rhoncus, vel viverra eros molestie.</p>
<p>Vivamus molestie posuere magna, sed aliquam metus tempor et. Donec eu libero eget neque faucibus sollicitudin. Nulla quis dui dictum, posuere elit et, sagittis libero. Nam at leo nec libero blandit porta a non nisl. Nullam maximus imperdiet nunc, id blandit lectus. Nunc eu lobortis neque. Nulla at nisl et nisl consequat eleifend.</p>
</div>
</div>
<div class="desc_video">
<iframe width="560" height="315" src="${videoEmbedURL}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="speakers" style="${useSpeakers}">
<h2>${speakersTitle}</h2>
<div class="speaker-group mktoText" id="speakersList" mktoName="List of Speakers">
<div class="speaker">
<img src="https://go.everbridge.com/rs/004-QSK-624/images/Marketo-Event-Landing-Page-Banner---Headshot-Placeholder-1.jpg" alt="Example Speaker">
<div class="name">First Name Last Name</div>
<div class="title">C*O of Company Incorporated</div>
</div>
<div class="speaker">
<img src="https://go.everbridge.com/rs/004-QSK-624/images/Marketo-Event-Landing-Page-Banner---Headshot-Placeholder-2.jpg" alt="Example Speaker">
<div class="name">First Name Last Name</div>
<div class="title">C*O of Company Incorporated</div>
</div>
<div class="speaker">
<img src="https://go.everbridge.com/rs/004-QSK-624/images/Marketo-Event-Landing-Page-Banner---Headshot-Placeholder-3.jpg" alt="Example Speaker">
<div class="name">First Name Last Name</div>
<div class="title">C*O of Company Incorporated</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="content">
<div class="social-media">
<a href="https://www.linkedin.com/company/33883" class="icon linked-in">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path id="LinkedIn_7_" class="st0" d="M99,60.29v36.15H78.04V62.71c0-8.47-3.03-14.26-10.62-14.26c-5.79,0-9.24,3.9-10.75,7.67 c-0.55,1.35-0.7,3.22-0.7,5.11v35.21H35.01c0,0,0.28-57.13,0-63.05h20.96v8.94c-0.04,0.07-0.1,0.14-0.14,0.2h0.14v-0.2 c2.79-4.29,7.76-10.42,18.89-10.42C88.66,31.91,99,40.92,99,60.29z M13.08,3C5.91,3,1.21,7.7,1.21,13.89 c0,6.05,4.56,10.9,11.59,10.9h0.14c7.31,0,11.86-4.85,11.86-10.9C24.66,7.7,20.25,3,13.08,3z M2.46,96.44h20.96V33.39H2.46V96.44z"></path></g></svg>
</a>
<a href="https://twitter.com/everbridge" class="icon Twitter">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path d="M97.84,22.68c-3.56,1.58-7.38,2.65-11.39,3.13c4.1-2.45,7.24-6.35,8.72-10.97 c-3.84,2.27-8.09,3.92-12.61,4.82c-3.62-3.86-8.77-6.27-14.48-6.27c-10.96,0-19.85,8.89-19.85,19.84c0,1.55,0.18,3.07,0.51,4.52 c-16.49-0.83-31.11-8.73-40.9-20.73c-1.71,2.93-2.68,6.33-2.68,9.97c0,6.89,3.51,12.96,8.83,16.51c-3.25-0.11-6.31-1-8.99-2.49 v0.25c0,9.61,6.84,17.63,15.92,19.46c-1.66,0.45-3.42,0.7-5.23,0.7c-1.28,0-2.52-0.13-3.74-0.37c2.53,7.89,9.85,13.63,18.53,13.78 C23.7,80.14,15.14,83.3,5.84,83.3c-1.6,0-3.18-0.1-4.73-0.27c8.78,5.64,19.21,8.93,30.42,8.93c36.51,0,56.46-30.24,56.46-56.46 l-0.07-2.57C91.82,30.15,95.19,26.66,97.84,22.68z"></path></g></svg>
</a>
<a href="https://www.facebook.com/everbridgeinc" class="icon facebook">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g> <path id="Facebook_7_" class="st0" d="M36.1,20.87c0,2.58,0,14.08,0,14.08H25.79v17.21H36.1V99h21.19V52.16H71.5 c0,0,1.33-8.25,1.98-17.28c-1.85,0-16.11,0-16.11,0s0-10.01,0-11.77c0-1.76,2.31-4.13,4.59-4.13c2.28,0,7.09,0,11.54,0 c0-2.34,0-10.44,0-17.92c-5.95,0-12.71,0-15.69,0C35.58,1.06,36.1,18.29,36.1,20.87z"></path></g></svg>
</a>
<a href="https://www.youtube.com/user/Everbridge" class="icon YouTube">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g> <path id="YouTube_7_" class="st0" d="M78.18,72.07h-5.3l0.02-3.08c0-1.37,1.12-2.49,2.5-2.49h0.34c1.38,0,2.5,1.12,2.5,2.49 L78.18,72.07z M58.3,65.47c-1.34,0-2.44,0.9-2.44,2.01v14.97c0,1.1,1.1,2.01,2.44,2.01c1.35,0,2.45-0.9,2.45-2.01V67.48 C60.75,66.38,59.65,65.47,58.3,65.47z M90.58,57.1v28.48c0,6.83-5.92,12.42-13.16,12.42H23.28c-7.24,0-13.17-5.59-13.17-12.42V57.1 c0-6.83,5.92-12.42,13.17-12.42h54.14C84.66,44.68,90.58,50.27,90.58,57.1z M26.89,88.67l0-30l6.71,0v-4.44L15.71,54.2v4.37 l5.58,0.02v30.08H26.89z M47.01,63.14h-5.6v16.02c0,2.32,0.14,3.48-0.01,3.88c-0.45,1.24-2.5,2.56-3.3,0.13 c-0.14-0.42-0.02-1.71-0.02-3.91l-0.02-16.13H32.5l0.02,15.88c0,2.43-0.05,4.25,0.02,5.07c0.14,1.46,0.09,3.15,1.44,4.12 c2.52,1.81,7.34-0.27,8.55-2.86l-0.01,3.31l4.49,0.01L47.01,63.14L47.01,63.14z M64.91,81.49L64.9,68.15 c0-5.08-3.81-8.12-8.97-4.01l0.02-9.91l-5.59,0.01l-0.03,34.21l4.6-0.07l0.42-2.13C61.22,91.64,64.92,87.95,64.91,81.49z M82.42,79.72l-4.19,0.02c0,0.17-0.01,0.36-0.01,0.57v2.34c0,1.25-1.04,2.27-2.29,2.27H75.1c-1.26,0-2.29-1.02-2.29-2.27v-0.26 v-2.57v-3.32h9.61v-3.62c0-2.64-0.07-5.28-0.29-6.79c-0.69-4.78-7.4-5.54-10.78-3.09c-1.06,0.76-1.88,1.79-2.35,3.16 c-0.48,1.37-0.71,3.25-0.71,5.64v7.95C68.28,92.95,84.33,91.09,82.42,79.72z M60.9,36.56c0.29,0.7,0.74,1.27,1.35,1.7 c0.6,0.42,1.37,0.64,2.29,0.64c0.81,0,1.52-0.22,2.14-0.67c0.62-0.45,1.14-1.12,1.57-2.01l-0.11,2.2h6.24V11.89h-4.91v20.64 c0,1.12-0.92,2.03-2.05,2.03c-1.12,0-2.04-0.92-2.04-2.03V11.89h-5.12v17.89c0,2.28,0.04,3.8,0.11,4.57 C60.43,35.11,60.61,35.85,60.9,36.56z M42,21.58c0-2.55,0.21-4.53,0.63-5.97c0.42-1.43,1.19-2.58,2.29-3.44 c1.1-0.87,2.51-1.31,4.23-1.31c1.44,0,2.68,0.28,3.71,0.84c1.04,0.56,1.84,1.28,2.39,2.18c0.57,0.9,0.95,1.82,1.15,2.76 c0.21,0.96,0.31,2.4,0.31,4.34v6.71c0,2.46-0.1,4.27-0.29,5.42c-0.19,1.15-0.6,2.22-1.23,3.22c-0.62,0.99-1.43,1.73-2.4,2.21 c-0.98,0.48-2.11,0.71-3.38,0.71c-1.42,0-2.62-0.2-3.61-0.61c-0.99-0.41-1.76-1.02-2.3-1.84c-0.55-0.82-0.94-1.81-1.17-2.97 C42.11,32.67,42,30.93,42,28.6L42,21.58L42,21.58z M46.88,32.11c0,1.5,1.12,2.73,2.48,2.73c1.36,0,2.48-1.23,2.48-2.73V17.99 c0-1.5-1.11-2.73-2.48-2.73c-1.36,0-2.48,1.23-2.48,2.73V32.11z M29.62,39.24h5.88l0.01-20.34l6.95-17.43h-6.44l-3.7,12.94 L28.59,1.44h-6.37l7.4,17.47L29.62,39.24z"></path></g></svg>
</a>
</div>
</div>
</footer>
<script>
// other Marketo templates may use JQuery.ready() here, but we don't need it
document.addEventListener("DOMContentLoaded", function () {
// old landing pages use mktFormSupport.js, not Marketo Forms 2.0 so
// we have to check
if (window.MktoForms2 && typeof MktoForms2 != "undefined") {
MktoForms2.whenReady(function (form) {
var clientID = (function () {
try {
var tracker = ga.getAll()[0];
return tracker.get('clientId'); // GA/GTM will do this same thing in customTask - see GTM customTask variable
} catch (e) {
return 'n/a';
}
}());
// this sets a hidden form field containing the Google Client ID on the embedded Marketo form
form.addHiddenFields({
'googleAnalyticsClientID': clientID
});
form.onSuccess(function (vals, typURL) {
var gaEventData = (function () {
var eventData = {
category: 'Request a Demo',
action: 'Request a Demo',
label: document.location.href
};
// Using this if statement because we're in a template that could get used literally anywhere.
// This code should be updated if new asset/campaign templates are defined (like events).
try {
if (`{{program.Name}}`) {
eventData['action'] += ` ~ {{program.Name}}`;
eventData['label'] = `{{program.Name}} ~ ` + document.location.href;
}
} catch (e) {
window.console && window.console.log(e);
}
return eventData;
}());
dataLayer.push({
'event': 'formMarketoLandingPageSubmit', // GTM will listen for this event and pass it on to GA to track conversion
'eventData': gaEventData, // data for GA event category, action, label
'eventCallback': function () {
// this does the redirect to the confirmation page...
// If you'd like to debug this, simply use Cmd + left-click on Mac (Ctrl on Windows) which should open the redirect
// in a new window
document.location.href = typURL;
},
'eventTimeout': 3000
});
// prevents the default redirect so we can be sure our custom GTM/GA event
// completed to record the conversion - doing the work in the eventCallback function
// ensures this
return false;
});
});
}
});
</script>
</body>
</html>