- 13 Oct 2022
- 10 Minutes to read
- Print
- DarkLight
Interactive Landing Pages (304)
- Updated on 13 Oct 2022
- 10 Minutes to read
- Print
- DarkLight
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.
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!
- Give your Campaign a Name – This will display as the page title in a browser tab and search engine results, as well as for internal reference.
- Select the video you would like – Search and Filter by all Standard or Interactive Videos available in your Media Library.
- Preview
- Then Publish and Share your ILP- That’s it!
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
- 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:
- 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.
- 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.
- 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:
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>
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
- 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
- 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
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
- 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.
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.
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).
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! |
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. |