HTML Quiz Lander Template [Free Download]

HTML Quiz Lander Template [Free Download] - Coding - Dijsu Forum Jump to content
Colin Dijs

HTML Quiz Lander Template [Free Download]

Recommended Posts

In the attachment you can see the HTML Quiz lander ZIP file. You can download it and follow the instructions below to set it up. If you don't know how to edit HTML it's not a problem just follow the instructions. Just know that one typo can fuck up the entire lander so be careful and make a duplicate at the start, so you always have the original as a backup.

This is what the lander looks like when you run it. This is a very commonly used lander for sweepstakes. I always recommend to bring in some of your own features overtime to move away from the original as it is ran by so many beginners.
Screenshot 2019-04-22 at 06.52.58.png


(1) You need to edit the logo at the top into the brand you are using for the offer. Make sure you TEST ON MOBILE so you can see if the image is not too big. If it takes up too much space the users might not see the quiz and the bounce rate will be significant.

(2) "Published on" will be automatically updated everyday

(3) Copy Headline/Subheadline. You can change this to whatever you feel is good

(4) The Quiz. You can change the colour. You can change the questions. For Facebook PPC go with 3 questions and for Insta Story PPC go with 2 questions.

(5) Fake Facebook comments. You can change the images and the text if needed. Change the images in the folder, you also use this to change the brand logo and delete the file use the correct and old name for the new image. Text can be changed in the html file.

Screenshot 2019-04-22 at 06.52.44.png

(6) Make sure to insert your legal documents/Facebook Disclaimer by using :

This site is not a part of the Facebook App. or Facebook, Inc. Additionally this website is is in no way sponsored, endorsed, administered by, or associated with Facebook Inc.

<footer class="shadow-inner">
<ul id="disclaimer">
<li><a href="[INSER YOUR URL HERE]" target="_blank">Privacy Policy</a>&nbsp;|</li>
<li><a href="[INSER YOUR URL HERE]" target="_blank">Terms &amp; Conditions</a>&nbsp;|</li>
<li><a href="[INSER YOUR URL HERE]" target="_blank">Disclaimer</a></li>
</ul>
</footer>

Screenshot 2019-04-22 at 06.53.17.pngScreenshot 2019-04-22 at 06.53.25.png

That's what the code looks like when you open it up in an editor. I used sublime text 2 in this scenario.

1) Make sure you change your CLICK URL for "google.com" on the bottom of the 2nd image.

2) Insert your Facebook Pixel in the header.

3) Insert your "No-redirect script" at the end of the body.

4) You can translate the entire lander by translating all text in white. That's also the only text you can edit if you want to keep things easy.

If you have any questions about this lander feel free to ask them below.

DijsUforum Quiz Lander Template html.zip

Share this post


Link to post
Share on other sites

thank you for explain

I have some qwestion about landing page

1, unusely when you publish new product how many landing page you creat for the product and how you test what beter?

2, Also unuselu you take all your landing page from spy and publush tham with the same word and image of spy and no have problem?

3, Also what html code must delet from landing page and how can find it

Thanks

Edited by hillel

Share this post


Link to post
Share on other sites
48 minutes ago, hillel said:

thank you for explain

I have some qwestion about landing page

1, unusely when you publish new product how many landing page you creat for the product and how you test what beter?

2, Also unuselu you take all your landing page from spy and publush tham with the same word and image of spy and no have problem?

3, Also what html code must delet from landing page and how can find it

Thanks

1. Typically split testing 2 landers is the norm and main variables are always lander headline / image. IF you're using quiz landers then also testing number of questions is a solid test too.

2. No problem swiping landers but you may need to clean the lander a little (remove any weird scripts) and update the tracking links.

3. Sometimes you'll see places where the lander wants to call out the visitor's information - things such as phone brand and model, carrier, browser, isp, city, country. These will often appear in one of these formats:

Code:
<script>alert("You've been selected as today's lucky user from "+ getURLParameter('city')+"!");</script>
Code:
<script>document.write(getURLParameter('isp'))</script>


...but can also appear without the "getURLParameter" function call:

Code:
<script>alert("You've been selected as today's lucky user from "+city+"!");</script>

What sometimes will happen is that the getURLParameter function would go missing when the lander is ripped - in which case all you need to do is paste it back - somewhere in the header section would be fine:

Code:
<script>
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] || ''
    );
}
</script>

Remove Dates and Times From the Past


Dates and times are used very often on landers. The code would automatically display either the current date/time, or an offset thereof. Sometimes, the actual dates/times that were displayed on the lander at the time it was ripped, will need to be deleted by you - otherwise when you run the lander you'll see 2 dates/times displayed one after the other - the old and the current.


Example:

Code:
<script language="Javascript">

// Array of day names
var dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");

var now = new Date();
document.write(dayNames[now.getDay()]);

</script>Friday,
In this case, the statement "document.write(dayNames[now.getDay()]);" will automatically post the current day of the week, so you'll need to delete the "Friday" which is old data. Be careful though and leave that comma after it alone!


Another example:
Code:
<script>
var mydate=new Date()
mydate.setDate(mydate.getDate()-1);
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write(""+montharray[month]+" "+daym+"")
</script>June 04 12:01 am

In this case, the "document.write(""+montharray[month]+" "+daym+"")" will output the current month and day, so you'll need to delete the old data "June 04", while LEAVING " 12:01 am" in there because this is the part that won't get replaced.

Replace Redirect Links


This is probably the most important fix of all. smile.png You want to redirect visitors to your tracking links, so you'll need to replace the old ones with yours! Below are some of the types of redirect links you may encounter.


Tracking link:

You'll need to replace all outgoing tracker links with your tracking click url. If you're using Voluum, you can get this click url by going to the "Tracking URLs" tab and copying the "Click URL":

G7Yb2hc.png

(The "Multi-offer click URL" is for when you want to put multiple outgoing links on your lander that lead to different offers. For example if you're running sweeps, you could offer several sweepstakes prizes for visitors to choose from - e.g. iphone, samsung phone, ipad - and redirect them to corresponding offers depending on their choice. To do that, simply append "/1", "/2", "/3" etc. - however many offers you have - to the original click URL, then when creating the Voluum campaign, make sure you add the same number of offers and in the correct order. NOTE: This is NOT the same as split-testing different offers by rotating them equally!)

This is an example of what an outgoing tracker link looks like on your lander:

Code:
<a href="http://example.tracker.com/click">CLICK HERE NOW</a>

If above is too complicated for you then I'd recommended just hiring a developer on Upwork or OnlineJobs.ph

Share this post


Link to post
Share on other sites
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×

Belum ada Komentar untuk "HTML Quiz Lander Template [Free Download]"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel