Second Street Dev Kit (SDK)
  1. Second Street Help Center
  2. Second Street Dev Kit (SDK)

Google Analytics Integration

Overview

If you use Google Analytics, the snippet below can be pasted immediately before our embed code on an embedded page, or before the SS-APP token in your scrape page or custom html wrapper.

Note: Be sure that Google Analytics’ analytics.js is included on the page. The tag will look similar to the example below.

Here are all of the events you can track with this snippet:

  • Number of page views
  • If a user has viewed a promotion form
  • If a user has abandoned a promotion form
  • If a user has begun inputting information to a promotion form
  • If a user has successfully submitted a promotion form, and/or each page of a form
  • If a user has begun inputting information to a promotion form, but encountered an error

To find the UA code, while on the Google Analytics home page, click on the Admin button, then the Property Settings page. Here is a link to the Google Analytics documentation to help: https://support.google.com/analytics/answer/7476135?hl=en&ref_topic=7557054

Example Google Analytics Tag and UA Code

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})
(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
</script>

The characters in bold are your Google Account ID.

The Snippet

<script>
window.SecondStreetSDK = {
version: '1.0.0',
ready: function ready(secondstreet) {
[{
category: 'Second Street',
name: 'secondstreet:form:visible',
label: 'Visitor saw a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:form:abandoned',
label: 'Visitor abandoned a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:form:started',
label: 'Visitor began filling out a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:form:submitted',
label: 'Visitor successfully submitted a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:formpage:error',
label: 'Visitor attempted to submit a page of a Second Street form but there was an error'
}, {
category: 'Second Street',
name: 'secondstreet:formpage:submitted',
label: 'Visitor successfully submitted a page of a Second Street form'
}].forEach(function (_ref) {
var category = _ref.category,
name = _ref.name,
label = _ref.label;
return secondstreet.addEventListener(name, function () {
return ga('send', 'event', category, name, label);
});
});
secondstreet.addEventListener('secondstreet:route:enter', function (data) {
return ga('send', 'pageview', data.detail);
});
}
};
</script>

Heads Up! This snippet of code is different than other SDK features. Do not make any changes to the code after pasting it into a promotion's embedded page or wrapper. Any changes made to this code will break the Google Analytics functionality, and may also impact other functionality related to form page submissions.

 

On an Embedded Page

  • Assure Google Analytics is active on your website by adding your account's Google Analytics Tag and UA Code to the embedded page.
  • Copy the snippet from above.
  • Paste the snippet, along with the embed code from the Publish step of a promotion's setup, into your content management system.

Example:

<script>
window.SecondStreetSDK = {
version: '1.0.0',
ready: function ready(secondstreet) {
[{
category: 'Second Street',
name: 'secondstreet:form:visible',
label: 'Visitor saw a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:form:abandoned',
label: 'Visitor abandoned a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:form:started',
label: 'Visitor began filling out a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:form:submitted',
label: 'Visitor successfully submitted a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:formpage:error',
label: 'Visitor attempted to submit a page of a Second Street form but there was an error'
}, {
category: 'Second Street',
name: 'secondstreet:formpage:submitted',
label: 'Visitor successfully submitted a page of a Second Street form'
}].forEach(function (_ref) {
var category = _ref.category,
name = _ref.name,
label = _ref.label;
return secondstreet.addEventListener(name, function () {
return ga('send', 'event', category, name, label);
});
});
secondstreet.addEventListener('secondstreet:route:enter', function (data) {
return ga('send', 'pageview', data.detail);
});
}
};
</script>

<!--[if lte IE 11]> <div style="width: 100%; background: red; border: 1px black; padding-top: 10px; padding-bottom: 10px; color: #fff; text-align: center; font-weight: bold; font-size: 18px"> Sorry, you are using an unsupported browser. This page will not display correctly. <br /> <a href="https://www.unsupportedbrowser.site/" style="color: #fff;" target="_blank"> Please click here to upgrade to a newer browser. </a> </div> <![endif]--> <script src="https://embed-642618.secondstreetapp.com/Scripts/dist/embed.js" data-ss-embed="promotion" data-opguid="abc-123-def-456-ghi-789-jkl" data-routing="hash">/**/</script>

With a Scrape Page or with Custom HTML

Scrape Page

  • Assure Google Analytics is active on the Scrape Page by adding your account's Google Analytics Tag and UA Code to the Scrape Page in your content management system.
  • Copy the snippet from above.
  • Paste the snippet into the Scrape Page generated from your content management system (CMS), above the SS-APP token.
  • In the Publish step of your promotion, click to Edit a One-Time Wrapper or Override your Default Wrapper.
  • Select the Scrape Page option.
  • Paste the Scrape Page URL on the line provided.

Custom HTML

  • Assure Google Analytics is active on your website by adding your account's Google Analytics Tag and UA Code to the Custom HTML in the <head> section.
  • Copy the snippet from above.

  • In the Publish step of your promotion, click to Edit a One-Time Wrapper or Override your Default Wrapper.
  • Select the Custom HTML option.
  • Paste the snippet above the SS-APP token in the Custom HTML editor.

Example Code: 

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="/StaticContent/CSS/default_wrapper-9e84f29b9c200ed7280e8139f94b3caf.css" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})
(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
</script>
</head>
<body class="ssDefaultWrapper">
<script>
window.SecondStreetSDK = {
version: '1.0.0',
ready: function ready(secondstreet) {
[{
category: 'Second Street',
name: 'secondstreet:form:visible',
label: 'Visitor saw a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:form:abandoned',
label: 'Visitor abandoned a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:form:started',
label: 'Visitor began filling out a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:form:submitted',
label: 'Visitor successfully submitted a Second Street form'
}, {
category: 'Second Street',
name: 'secondstreet:formpage:error',
label: 'Visitor attempted to submit a page of a Second Street form but there was an error'
}, {
category: 'Second Street',
name: 'secondstreet:formpage:submitted',
label: 'Visitor successfully submitted a page of a Second Street form'
}].forEach(function (_ref) {
var category = _ref.category,
name = _ref.name,
label = _ref.label;
return secondstreet.addEventListener(name, function () {
return ga('send', 'event', category, name, label);
});
});
secondstreet.addEventListener('secondstreet:route:enter', function (data) {
return ga('send', 'pageview', data.detail);
});
}
};
</script>

{SS-APP}

</body>
</html>