Landingpage Snippets {alpha}

Make your landingpage dynamic within a minute.

Installation

Insert this script into your landingpage, before the closing </body> tag.

Tags

… are visual elements that can be placed anywhere on your website.

Tag Description Options Demo
<span data-lps="date"></span> Display date and time in various formats. data-preset (optional) lastmonth, yesterday, tomorrow
data-format (optional) Separate multiple placeholders by comma. W: weekday short, WW: weekday long, Y: year numeric, YY: year 2-digit, M: month numeric, MM: month 2-digit, MS: month short, MN: month norrow, ML: month long, D: day numeric, DD: day 2-digit, h: hour numeric, hh: hour 2-digit, i: minute numeric, ii: minute 2-digit		 Today:
Tomorrow:
<span data-lps="ip"></span> Display the visitors IP-Address.   IP:
<span data-lps="location"></span> Display the geographical location. Based on the visitors IP address. data-details (optional) {continent.code}, {continent.name}, {country.code}, {country.name}, {state.code}, {state.name}, {city.name}, {coordinates.accuracy}, {coordinates.latitude}, {coordinates.longitude} Country:
City:
<span data-lps="flag"></span> Show the country flag. Based on the visitors IP address. data-format (optional) 4x3, 1x1 (default: 4x3)
data-country (optional) ISO 3166-1 alpha-2 country code or "location" for geoip based flag. (Default: location)
data-style (optional) Style to apply to <img> tag. (Default: with: 20px;)		 Location, 4x3:
Location, 1x1:
Country FR, 4x3:
<span data-lps="random"></span> Display a random number. data-min (optional) Lower border. (default: 0)
data-max (optional) Upper border- (default: 100)
data-format (optional) integer, float, currency (default: integer)
data-digits (optional) Max. number of float digits. (default: 2)
data-currency (optional) Currency symbol list (default: EUR)
data-display (optional) Currency- symbol, code, name. (default: symbol)		 Integer 1-10:
Float 10-100:
Currency by location 43-93:
Currency-Code by location 17-34:
Currency-Name by location 10-100:
<span data-lps="arg"></span> Display the named url query argument. data-name (required) name of the url query argument Call this page with ?foo=bar:
<span data-lps="device"></span> Display the visitors device details. data-details (required) {name} {type} Device name:
Device type:
<span data-lps="os"></span> Display the visitors operation system details. Operation system:
<span data-lps="device"></span> Display the visitors user agent details. data-details (required) {name} {type} {raw} User agent name:
User agent version:
User agent raw:

Modules

… bring in functionality that does not necessary generate visual output.

Module Description Settings
Tracker Wire up all links in you advertorial without touching every <a>-tag by hand.
Just add data-lps="tracker" to the tags of modify the selector in the configuration block below.
<a href="" target="_blank" data-lps="tracker">click here (new window)</a>
<a href="" data-lps="tracker">click here (same window)</a>

Possible settings, see the configuration scriot below. Except for the url all settings are optional.

url: '' (your tracker url)
args: {cid: 'cid'} (default, placeholder for the click id in the url)
tokens: {} (default, you can pass any value here)
selector: 'a[data-lps=tracker]', (default, dom selector to find tracker links)
Bounce Redirect visitors who use the back button.

Possible settings, see the configuration scriot below. Except for the url all settings are optional.

url: '' (your tracker url)
args: {cid: 'cid'} (default, placeholder for the click id in the url)
tokens: {} (default, you can pass any value here)

Configuration

Modules and Events need a configuration block placed right before the above loader script.

<script>
landingpagesnippets = {
 modules: {
  tracker: {
   url: 'your tracker url',
   args: {cid: 'cid'},
   selector: 'a[data-lps=tracker]'
  },
  bounce: {
   url: 'your bounce url',
   args: {cid: 'cid'},
  }
 }
};
</script>