Thread: Day 20-25: b)Modifying Lander Code

So we've downloaded landers from Adplexity (or from another spy tool, or through manual spying), set up hosting for them on S3 etc., and figured out a way to edit the landers (using CrossFTP or another method).

Next, we'll look into how to "fix up" the landers by editing the code.

The problem with ripping landers, is that some of the coding would get screwed up while it's being ripped - some code could go missing where it's needed for the lander to work properly, and on the other hand you'll find characters appear in places they have no business being at.

The "fixing up" of landers involves correcting all these errors.

Fixing up ripped landers WILL require that you know at least SOME coding - as I've mentioned in a previous lesson, along with links to some online coding lessons for beginners.

Before proceeding to the next lesson, you should have 3-5 landers "fixed up".

Some landers you ripped will be harder to "fix" than others. If a lander is taking way too long to fix, or you're having too much trouble with the code, just try another lander. This is why I advised for you to download 10 in the beginning - so that in the end you'll still end up with 3-5 to test.

Below are some of the common things that need to be fixed for a ripped lander to display and work properly.



***************

Common Things to Fix For Ripped Landers


1)Add Missing getURLParameter Function

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>

BTW - if you're not familiar on how to display tracking parameters on landers, please see:

https://stmforum.com/forum/showthrea...ing-Parameters


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>

2)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.



3)Replace Tracking Links

You'll need to replace all outgoing tracker links with your tracking click url. This is an example of what an outgoing tracker link looks like on your lander:

Code:

<a href="http://yourtracker.com/click">CLICK HERE NOW</a>

Below is how you can get this click url - from your respective tracker.

If you're using Voluum:

Get this click url by clicking on the settings icon (little gear at the top) > "Tracking URLs" tab > copying the "Click URL":



If you're using Binom:

Get this click url by clicking on "Settings" at the top > "Tracking links" tab > copying the "Click URL":



If you're using Funnelflux:

Get this click url by going to "Pages and Sources" in left menu > "Landers" tab at top > "+ New" > expanding the "Page Action Links" section > copying the "Action URL":





4)Replace Backbutton Link

The backbutton redirect code will redirect the visitor to an url of your choosing when they click "back" from your lander. So - replace this url with whatever you like: Your tracking click url (to send them to the same offer you're promoting when they click on the CTA), another campaign url leading to another lander/offer, whatever you like.

The code below is only one specific example - there are lots of different backbutton codes, but most are characterized by the "history.pushState" and "location.replace". Note: This is just an observation made by a non-coder, so if any of you drive-by-geeks could explain this better please do! (I use the word "geek" with only utmost respect and admiration....)

Code:

<script type="text/javascript"> 
        ! function () { 
            var t; 
            try { 
                for (t = 0; 10 > t; ++t) history.pushState({}, "", "#"); 
                onpopstate = function (t) { 
                    t.state && location.replace("http://www.wherever-the-heck-you-want-to-redirect-to-when-they-click-back.html") 
                } 
            } catch (o) {} 
        }(); 
</script>

5)Replace Device Detection Link

This snippet is a popular one for mobile landers. What it does, is it checks to see whether the visitor is browsing from desktop or a mobile device. If the visitor is from desktop, they will be redirected to the url specified in the code. Again, this can be your tracking click url (to send them to the same offer you're promoting when they click on the CTA), another campaign url leading to another lander/offer, whatever you like. Just make sure it will take visitors to landers and/or offers that accept desktop traffic.

Code:

<script type = "text/javascript">
  if(screen.width >= 1000) {
      if(typeof window.orientation !== 'undefined'){ var ortvalue = "defined"; }
      if(ortvalue != "defined") {
        document.location.replace("http://www.an-offer-that-accepts-desktop-traffic.com");
      }
  }
</script>

6)Download Files to Host Locally and Change Paths

Sometimes you'll see a lander reference a file that's hosted on a previous owner's server. This can be a jquery file, image file, mp3 file, etc. Instead of continuing to call these files from that person's server you should download them and upload to your own hosting so that you can be sure they won't disappear when you try to load them tomorrow.

Example:

Code:

<source src="http://www.guy-you-ripped-from.com/sound.mp3" type="audio/mpeg">

Browse to the sound file, download it, upload it to your server, and change the path. Say you uploaded the file to the same directory as your lander file, you'd then change the code to:

Code:

<source src="sound.mp3" type="audio/mpeg">

Often, by the time you go to download the file, it's no longer there. In that case you'll just need to find a suitable replacement on your own. If the file is a jquery file, you can go here:

https://code.jquery.com/jquery/

There are different versions available, and sometimes you can tell which version the lander was using based on the file name. Just copy the jquery code into a text file, rename it properly according to the filename specified on the lander, upload it to your server, and reference it there.

NOTE: Even if the jquery file is already present in the files you ripped, it would still be a good idea to replace it with a fresh copy you download from the official site above, because some people like to hide sneaky redirect code in jquery files.

NOTE 2: Please see further clarification regarding jquery files here:

https://stmforum.com/forum/showthrea...l=1#post292107

NOTE 3: Please see mypayne's suggestion to use google-hosted files to decrease load time:

https://stmforum.com/forum/showthrea...l=1#post298453



7)Add a Push Collection Script

This is optional, but would be highly recommended.

When you add a push collection script to your landing pages, visitors will see a notification like this:



If they click "Allow" - and a portion of your visitors will - they'll become a subscriber - after that you can send push ads to them to promote anything you like - for as long as they stay subscribed. This can be a great way to squeeze additional revenue from your traffic without too much additional effort.

The easiest way I know of to implement this is by using Monetizer.com. Here's what you do:

-Sign up for an account at https://www.monetizer.com/.

-Add a domain to your Monetizer account - here's a video with instructions:



-In the left menu go to "Collect Subscribers".



-You'll see 2 options. "Option 1: Smart Link" makes a great option to link to for the backbutton we covered above. Ignore that for now - to collect push subscribers we want to look at Option 2. For "Step 1: Choose a host domain", choose the domain you added to Monetizer, and click "Next Step >".



-For "Step 2: Redirect the user on Allow/Deny", you can leave the fields blank and just click "Next Step >". Alternatively, feel free to experiment with redirecting visitors to different urls when they click on the "Allow" and or "Deny" buttons.



-For "Step 3: Enter a tracking tag for reporting", you can leave the field blank as well, and just click "Next Step >". If you want Monetizer stats to show a breakdown by tags, you can enter an identifier tag here.



-For "Step 4: Interaction Prompt", checkmark "Enable Interaction Prompt". You can leave the rest of the fields empty and just click "Next Step >". Alternatively, you can do your own testing by changing the default message and buttons that appear in the push popup as show in the screenshot above (where the default message is "We would like to show you notifications for the latest news and updates."; the default "Accept Button text" is "Allow"; and the default "Deny Button text" is "No Thanks").



-For "Step 5", download the sw.js file and upload to your landing page directory, in the same directory/folder as the lander's index.html file. Click "Next Step >".



-For "Step 6", copy the code snippet and insert it into the index.html file of your landing page, in the header. For example you can insert it just before </head>.





And voilà! Your lander will automatically start building a list of push subscribers, and Monetizer will automatically show them ads to monetize them for you!



8)Check for Sneaky Redirects

Sound advice from Caurmen on this topic:

If you watch the web console for it calling out to ANY external service, and it doesn't, and then check if it's dropping any cookies, and it's not, you should be OK.

But for just checking whether it's calling out, developer tools > network tab.

To check whether or not it’s dropping cookies:

-On Chrome: chrome://settings/

-And check for your domain.

-Check before you first visit the page on your domain, and then after.

Or use something like http://www.cookie-checker.com/

Also please see these threads/posts/links for other valuable contributions/suggestions:

https://stmforum.com/forum/showthrea...l=1#post334105

https://stmforum.com/forum/showthrea...eaky-redirects

https://stmforum.com/forum/showthrea...l=1#post292411

https://mobile.adplexity.com/tutorial (the section starting with "3) Inspect JS code")



This short list is just a start. I'll try to add more later. And of course, please feel free to post more below and I'll paste them in here!

Member Mia has collected a number of useful scripts for adding to landing pages:

https://stmforum.com/forum/showthrea...ts-for-landers

Feel free to add some of these to your landers and split-test different combinations to see if they increase your conversion rate.



***************

Making Sure a Lander Displays and Functions Correctly

When you feel that you've finished fixing up a lander, do these 2 things to make sure you've done a good job:

1)Make sure it functions properly. Browse to your lander URL and click through each link to make sure they've all been replaced with your tracker click URL. If it's a survey lander, click on the answers to make sure the buttons work and you can proceed to the next question. If it's a slots lander, trigger the slots to make sure you do "win" the "prize". Basically, click on everything you think your visitors would, to make sure everything is working as it should. If not, go back into the coding, figure out what's wrong, and fix it.


2)Make sure it displays properly. Go to BrowserStack.com and sign up for free. Choose up to 25 browsers for testing and put in your lander URL. 15 browsers have been selected for you by default including desktop browsers, but if you're running mobile offers, feel free to just pick mobile browsers. Scroll to the bottom to click on "General screenshots".

You'll see a list of screenshots showing how your lander will look in the various browsers. If the lander looks "broken" in one or more screenshots, you'll need to figure out how to fix the code, or make a note to not target that particular browser if it's a small one anyway, or if the lander looks broken in too many browsers you may decide not to use that lander at all.

In browserstack, also make a note of landers that require scrolling in order to complete some action (e.g. click on a CTA, select an answer for a question, click on a spin wheel). People don't like to scroll, least of all a pop ad. So try to make as much as possible - especially the CTAs/buttons - fit above the fold (i.e. without requiring scrolling). You can achieve this by eliminating some of the text and making the header logo/image smaller, as well as eliminating some of the white space. This will sometimes require knowledge of CSS, which is where your programming skills will come in handy.



**************************************************

If you have minimum coding experience, it will take quite a bit of trial and error and going through and fixing a few landers before you'll get the hang of this. For non-coders, this is the most troublesome part of running campaigns - but I promise that it will get easier and faster.

This is why I've assigned so many days for you to complete this task - it's not easy unless you have coding experience.

I suck at coding myself, but do know enough to get by, and then there are lots of coding experts on this forum. So if you're stuck on anything, do make a post to attach some code (or even upload the entire lander's files to dropbox and paste the link into your post) to ask for help. We'll do our best to help.

You can also just hire a coder on upwork or fiverr - we've mentioned that in the intro to landing pages lesson.

In the next lesson I'll go over how to optimize landers for speed. After that, we'll start testing landers. Please stay tuned!



Amy

Originally Posted by aiden l

https://www.youtube.com/watch?v=U7FXLvq0at8

Found this gem, may be helpful for some, had to share

Landerlab sure knows what they're doing! Thanks for the share @aiden l!


Amy


Sent from my iPhone using STM Forums