Building A Landing Page Template

Working with websites means you keep a lot of templates. Marketing templates are often very simple. Their goal is to get enough information communicated so that a person will perform an action. A click, filling out a form, signing up for a mailing list, etc. I use a combination of PHP and Javascript for landers and tracking.

Decide what you need

There are different approaches to building a landing page. Over time you will build yourself a library of functions that you use across all landers. There are many aspects of the template that will apply to just that site style. But different site styles will need the same way of delivering some standard components. Like split testing with a footer bar.

Initially, a shoddy lander might get used on purpose. There is nothing wrong with doing a quick job on a test. It’s up to you to know when your angles are worth investing time on development. But let’s say you’re consistently needing to build static landers with a flurry of details and sometimes translations. Well, it gets pretty deep pretty quick.

Your skills as a developer (and team communication) will determine how intricate your landers are. It takes some time and talent to build a publishing system. Regardless of the skill level behind any two comparable landing pages, there are some things that always stay the same.

First set up tracking

I use Google Analytics. The code they give you brings in a JS function called ‘ga’ from a script located at https://www.google-analytics.com/analytics.js. If you are so inclined you could go to that address and see the code that you are bringing in. Part of that code creates a new instance of the GA tracking object. It’s worth it to spend some time reading about how to use the GA tracking object. By default, GA will tell you an incredible amount of information about your traffic. You can also use it to be very specific. One of the things that I do for all my landers is to assign a name to the page and names to all the links. That way I know how many people are clicking on which part of the page.

You gotta get your timing right

Trying to tell the right time can be difficult. I’ve used JS and PHP to implement decisions based on time. It’s more important to get the format correct. I’ve seen some really interesting formats from the middle east. Those guys do math to tell the time. . . anyway, formatting. If you’re making a Spanish lander, you really can’t use the English words for days and months. That’s too obvious you’re a lazy marketer. You need a way to inject certain words at certain places in your text.

Dates with JS

Here’s a javascript function for the date given a set of words for the days and months.

<script>
    function printDate() {
        
        // store the words for days and months
        var days =  ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); ]

        // get the value of today's date
        var now = new Date();
        
        // write today's date
        document.write(dayNames[now.getDay()] + ", " + monthNames[now.getMonth()] + " " + now.getDate() + ", " + now.getFullYear());
        
    }
</script>	

This is really meant to be used with sets of words that are not in English. Here are some translations to get you going. Replace the variables in the above function.



//  ------------------------
//	Date Script - Spanish

var days = ["domingo", "lunes", "martes", "mi&eacute;rcoles", "jueves", "viernes", "s&aacute;bado"];		
var months = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];


//  ------------------------
//	Date Script - French

var days = ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"];
var months = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"];


//  ------------------------
//	Date Script - German

var days = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Feitag", "Samstag", "Sonntag"];
var months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "Novembre", "Dezember"];		

Dates with PHP

If you prefer an approach that is a little more automated, you will want to take advantage of locales. Check out this discussion: http://stackoverflow.com/questions/22635303/get-day-from-string-in-spanish-php.

<?php 
    setlocale(LC_ALL,"es_ES");
    $string = "24/11/2014";
    $date = DateTime::createFromFormat("d/m/Y", $string);
    echo strftime("%A",$date->getTimestamp());
?>

Get your tracking links and build more functions

It’s really important to use your tracking links consistently. Do not manually put your links in every anchor tag. You should build functions to display links and images. All your images should always be linked to your campaign. Always using functions to display links and images will help you avoid unneccessary mistakes during development. For example in PHP you can store your tracking links in a variable and echo an anchor element with some text like this:

<?php

// tracking links
$link1 = 'http://tracking.service-provider.com/product1';
$link2 = 'http://tracking.service-provider.com/product2';

// a simple function to display a link
function displayLink($link, $linkText)
{
    echo "<a href='$link'>$linkText</a>";
}

// use function with link1 
displayLink($link1, 'Product 1');

?>

Develop slowly and consistently

As long as you’re marketing you will have opportunities to learn and build new things. Keep exploring.