Interactive Landing Pages (304)
  • 13 Oct 2022
  • 10 Minutes to read
  • Dark
    Light

Interactive Landing Pages (304)

  • Dark
    Light

Article summary

Overview

LightSpeed VT Interactive Landing Pages (ILP) offer content creators and subject matter experts new marketing opportunities to share interactive videos outside of the VT system. Build ILP Campaigns to promote events and product deals, gauge audience interests through interactive surveys, generate warm leads, and more.

As an admin, you can quickly drop an interactive video in an “auto-generated” Private Labeled page (based on Location Theme), add a message and a Call-to-Action link – all with literally no design work. Need something more custom? Simply switch to the custom template and drop in your HTML code.

With rich analytics built-in, monitor and track all visitors, behavior, interactive results and even expand your tracking capabilities further by adding Google Analytics.

Read below for more a technical breakdown of creating and managing ILPs:

My Campaigns

The “My Campaigns” dashboard contains a list of all ILPs – both active and inactive – and offer quick access to important information and features.

201905ILP-My-Campaigns-1024x5762.pngThe My Campaigns management page highlights all active and inactive campaigns
 
with quick link access to edit, share and view reports.

Action Menu

  • Edit: Select either the Campaign Name or pencil icon to Edit Campaign Details.
  • View: Preview the ILP in a new window/tab.
  • Share: Access Social Sharing, copy Public URL and Embed Code.
  • Performance: View and export Campaign analytics.

Create New Campaign

There are two primary ways to create ILP Campaigns. Outlined below, you will find details to help you determine the best scenario based on your individual needs.

Video Only (Easy)

This is by far the quickest way to get an Interactive (or Standard) Video published for public viewing outside of your VT System. By quick, we mean less than 20 seconds!

  1. Give your Campaign a NameThis will display as the page title in a browser tab and search engine results, as well as for internal reference.
  2. Select the video you would likeSearch and Filter by all Standard or Interactive Videos available in your Media Library.
  3. Preview
  4. Then Publish and Share your ILP- That’s it!

201907ILP-Easy-Mode-stopwatch2.gif

Note:

ILP’s created with the Video Only easy mode will be based on the Location Theme you are currently logged in to.

Standard Campaign

Need more than just a video? Selecting Standard Campaign allows you to add Headline Text, Body copy and a Call-to-Action button to drive greater conversions.

Below is a general breakdown of the options and features to leverage…

1. Campaign

201907ILP-Panel-01-Campaign2.gif

  • Campaign Name: Give your ILP a friendly title for easy reference.
  • Internal Description: Add notes, keywords or important details for reference and search-ability.
  • Page Layout
    • Select Theater for a larger video display and page design based on a selected Private Label Theme.
    • Select Code Your Own for a fully customizable page layout using HTML, CSS and JavaScript.

2. Content

Theater

If you select the Theater page layout, the following options and features are available:

201905ILP-Theater-Panel-02-Content-731x10242.png

  • Headline: Add a user friendly title to display as your header text.
  • Body Content (optional): You may select to add content above and/or below the Featured Video. Select the option to reveal a WYSIWYG (what you see is what you get) editor to add stylized text, images and links.

Featured Video

  • Video Path: Select or Paste a Video path from your Media Library. This can be Standard or Interactive Video.
  • Poster Image: Select a backup image to display before a user must initiate a video play. By default, all Standard Videos selected will pre-populate an auto generated thumbnail from the video source, you may choose to override this for your individual marketing needs.
  • Require Email Capture: Enable this to require a user enter their email address to unlock (watch) the video. If a user is an existing VT account holder with recent login activity on the same device, they will not be required to enter an email.
201905require-email-address2.pngExample: A visitor must enter their email address to begin watching the [interactive] video.
  • Autoplay Video: By default, your video will autoplay muted (adhering to industry/browser standards). Disable this to display the Poster Image with a Play Button overlay.
  • Enable Live Voting: When using an Interactive Video, you can select to show the interactive results in real-time! Visitors to your ILP can see a live percentage based ranking of interactive video selections.
201905live-voting2.pngExample: Live Voting based on your videos interactive results.
  • Redirect on Completion: After a video completes, you can select to auto-redirect the ILP to another custom domain.

Call To Action

  • Button Text: Add a clear Call to Action to drive visitors through a sales or marketing funnel (i.e. Start Your Free Trial Today!)
  • Link: Add a URL to link visitors from your Call to Action
  • Open Link: Choose to how the Call to Action link should open

Code Your Own

If you select the Code Your Own page layout, the following options and features are available:

201907ILP-Code-Panel-02-Content2.png

Featured Video

  • Video Path: Select or Paste a Video path from your Media Library. This can be Standard or Interactive Video.
  • Poster Image: Select a backup image to display before a user must initiate a video play. By default, all Standard Videos selected will pre-populate an auto generated thumbnail from the video source, you may choose to override this for your individual marketing needs.
  • Require Email Capture: Enable this to require a user enter their email address to unlock (watch) the video. If a user is an existing VT account holder with recent login activity on the same device, they will not be required to enter an email.
  • Autoplay Video: By default, your video will autoplay muted (adhering to industry/browser standards). Disable this to display the Poster Image with a Play Button overlay.
  • Redirect on Completion: After a video completes, you can select to auto-redirect the ILP to another custom domain.

Custom Content

Add your custom HTML code for a truly unique page layout that meets your marketing and design needs. The Feature Video can be placed anywhere in your design with a simple tag inclusion – such as the following examples:
Default Video Tag:

 <vt-video></vt-video> 

Video Tag with Custom Size:

 <vt-video width=“1024” height=“576”></vt-video> 
NOTES:

In order for the video to display properly across all device/screen sizes, you will need to include the following reference link within your page head (before the closing </head> tag):

`<link rel="stylesheet" type="text/css" href="https://courseware.lightspeedvt.com/style/ilp-embed.css>`

3. Settings

Based on the Page Layout you selected, the following Settings are available for optional customization…

Theater

202001image2.png

  • Custom HTML for Head: If needed, add custom head tags to your landing page. I.e. Facebook pixel tracking script.
  • Enable Social Sharing: Displays Social Sharing buttons on your landing page (Facebook, Twitter, LinkedIn, Google, Copy Link).
  • Integration
    • Webhook System: Integrate with other 3rd party tools using Webhook integration. Learn more
  • Search Engine Optimization – Note: GA will give you more high level analytics, but for firing specific tags based on events/clicks, you are better off using GTM to manage all of those configurations. You can read more about GA and GTM here.
    • Google Analytics ID: Add your Universal Analytics ID to integrate your landing page with GA.
    • Google Tag Manager ID: Add your GTM tag to integrate your landing page with Tag Manager.
  • Enable Web Crawl: Allow search engines to track and rank your landing page.
  • Enable Post Messaging: Allow parent iframe to receive interactive data from the video through JavaScript.

Code Your Own

202001image-15.png

  • Integration
    • Webhook System: Integrate with other 3rd party tools using Webhook integration. Learn more
  • Enable Post Messaging: Allow parent iframe to receive interactive data from the video through JavaScript.

Real Time Webhooks

Use Real Time Webhooks in the “Integration Management” toolset to send this data (what the user selected) in real time to any other web application, reporting tool, Zapier, etc.

More info on using Webhooks with Interactive Landing Pages can be found here.


Edit Existing Campaign

After creating a Campaign, you may find it necessary to make revisions. Simply select the “Edit” pencil from the “My Campaigns” dashboard. Whether stylistic or content based, revisions can be made at anytime – but, you’ll want to be mindful of how existing analytics will be affected. In some cases, you may wish to “Reset All Tracking Data” to ensure more accurate performance data (i.e. video update, call-to-action change, etc…) – this action cannot be undone.

Performance

Now that you’ve created a Campaign and shared it with your audience, it’s time to see how it’s performing. Tracking and monitoring your Campaign’s performance provides powerful insight into learning how effective your messaging is and how you could better tailor your content for segmented audiences. How many and who is viewing my ILP? Are visitors engaging with my content? What are their interactive results? Are they sharing the ILP with their social networks?

Campaign Performance

201905ILP-Report-1024x6682.png

Data in the visual chart reflects the selected user type for a chosen date range. Selecting a new user type below will update the chart accordingly. The value displayed represents the total number of views, while the Unique value correlates with how many individuals have viewed – meaning some users may have viewed the ILP multiple times.

  • Total Views: How many times the ILP has been viewed.
  • VT Users: How many visitors were existing VT account holders (this is dependent on utilizing cookies from a users recent login activity with a VT system).
  • Anonymous Users: How many visitors are not associated with a VT (or unknown).

For a more detailed breakdown of users, select “View Full Details”.

On Page Behavior

201905ILP-Report-022.png

  • Total Played: Who, when and how many times was my video content played.
  • Unique Played: A subset of Total Played indicates how many were unique individuals.
  • Exit Action: Who, when and how many times did a visitor click the Call-to-Action button.
  • Social Shares: Who, when and how many times did a visitor share the ILP with their social network and to which platforms.

Interactive Results

If you created an ILP with an Interactive Video, the results captured from user engagement are reported here. Multiple questions are paginated within the panel. Selecting a value next to a corresponding answer will display details on who responded and when.

201905ILP-Report-032.png

Export Data

Campaign Performance data can be exported for external management – simply choose the desired date range and select the “Export” button to download a Microsoft Excel (.xls) spreadsheet. All data is included and separated by two sheets; Behavior and Log.
Behavior

Detailed breakdown of individual user interaction

  • Played: User initiated video playback
  • Response: Interactive results captured for each question
  • Completed: User reached the end of video

Log

A more comprehensive list of individual user behavior that includes associated email and IP addresses.

Reset Tracking

As mentioned earlier, at some point you may need to reset or delete data collected for a specific Campaign – whether because you were testing internally and are read to share the ILP publicly or because a significant change was made to your video content. Head to the Campaign Performance screen and select “Reset All Tracking Data” near the top right. You will be ask to confirm before proceeding, as this process cannot be undone.

Share & Embed

Quickly and easily share Interactive Landing Pages across Social Media platforms, Email and even Embed them on external websites. Simply select the “Share” icon from any of your campaigns and choose how you’d like to reach your audience.

202012ILP-Share-Embed2.gif

Responsive Layout

If you are embedding an ILP on your own site, additional CSS declarations may be needed for the video player to be responsive. See Example snippet below…

<!-- Replace the below iFrame 'src' path with your ILP's embed 'src' path -->
<div style="width:100%; max-width:1024px; margin: 0 auto;">
	<div style="height: 0; overflow: hidden; padding-top: 56.25%; position: relative; transition:width 1s ease-in-out;">
		<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;transition:width 1s ease-in-out;" src=" INSERT YOUR VIDEO URL HERE " frameborder="0" allow="accelerometer; encrypted-media; gyroscope;" scrolling="no" allowfullscreen></iframe>
	</div>
</div>

Using Portrait Videos

It’s a heated debated with some, but like it or not, 90% of content tailored for vertical viewing have a higher completion rate over traditional landscape. Portrait videos help create a more immersive experience for mobile users, simply because it’s easier for them to watch your video all the way through.

If you are planning or currently running digital ads targeting both desktop and mobile users, cut your work in-half and deliver both interactive experiences with one landing page. Follow the steps below to learn how.

Mobile Detection

To embed your Interactive Videos on the same Landing Page, we’ll need to add a little code to detect the type of device someone is accessing your page from.

First, you’ll need access to your page’s ‘Head’ tag, where you’ll copy and paste the following:

<meta name="viewport" content="width=device-width, initial-scale=1"><style>  body { margin: 0; }</style> 

Next, copy and paste the following wherever your video should display on the page.

 <iframe id="LSVTVideo" style="width:100%;" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" scrolling="no" allowfullscreen></iframe>

Lastly, you’ll need to include the following Javascript just below the video snippet (within the body of your page).

Note:

Be sure to update the ‘iframe.src’ fields with the appropriate ILP embed links.

 <script>var iframe = document.querySelector("#LSVTVideo");    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {      console.log("mobile device");      iframe.src = "Paste_Your_Portriat_ILP_Embed_Link_Here";      iframe.height = window.innerHeight; }    else {      console.log("not mobile device");      iframe.src = "Paste_Your_Landscape_ILP_Embed_Link_Here"      iframe.height = window.innerHeight; }</script> 

1Source: Impact/Mediabrix 2020

Live Examples

Video Only (Easy Mode)

You don’t always need “fluff” to make a good Landing Page. Use interactivity to drive the discussion and nurture the experience. This example showcases just that – your video.

Standard Campaign

Don’t code or have the expertise to “design” a landing page? This Standard campaign example showcases how an ILP inherits your Private Labeled Theme, using only the options and settings available “out-of-the-box”. No design or technical skills required!
Note: If you’re already signed into your VT System when viewing this page, sign out first to get the full experience.

Custom “Code Your Own”

This is an example template we built for our 2019 Summit – it includes an interactive video and a Stripe Checkout (payment) widget. Learn more about Stripe and Chargify integration.

Was this article helpful?

What's Next
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.