We’ve done posts on how to create certain elements for landing pages, including scripts and jquery to make more interactive and more alluring landing pages. We’ve even created a video on how to create a full landing page, start to finish.

With the ever growing prominence of mobile, however, we figured we should create some short guides on how to create landing pages specifically for mobile devices.

We barely touched the surface with a previous post regarding tools and principles behind creating a mobile landing page, so this time we went ahead and created two videos that will give you the basic guidance on how to create mobile landing pages, first hand, using Dreamweaver and a little help from a css gradient generator.

Part 1Part 2

While mobile advertising is relatively new in the marketing world, many individuals will praise its wonder and lucrative nature. Since it’s still somewhat new however, it’s also somewhat disorganized.

In an attempt to help guide those who are new to mobile, I wanted to provide some basic guidelines and tips that I hope will help you figure out the puzzle that is mobile.

Tip #1 – Know Your Traffic Sources

It’s important to do a little bit of research on your traffic sources before you just dive in. Keep in mind that not all mobile traffic sources possess carrier targeting, and while some traffic sources perform really well with certain carriers, others may not.

That said, while there certainly are more, here is a short list of some traffic networks which provide carrier targeting:

Additionally, there are mobile traffic sources that specialize in certain types of mobile traffic. For instance, Airpush specializes in push notifications while TrafficJunky and Exoclick specialize in adult traffic.

In short, make sure you research and ask questions before diving into any traffic network because your campaign performance will vary.

Tip#2 – Proper Tracking

Mobile tracking is a fickle thing. Performance metrics apply just the same to mobile traffic as it does to your typical desktop traffic, but with the added complexity of mobile devices, carriers, and operating systems. Of course, this means you’ll want adequate tracking software to get a proper slant on your data.

Although many use systems like Prosper202 and CPVLab, their platform may not be granular enough to catch all of the performance opportunities and variables in mobile.

When trying to determine the performance of specific mobile carriers, devices, and operating system you may want to go with more comprehensive mobile tracking systems like iMobitrax or MobAff Tracker.

Both tracking systems were developed by individuals who have extreme experience in mobile and understand what performance marketers need to focus on to become profitable allowing things like redirects and major targeting features.

Tip#3 – Optimize Properly

It seems that the biggest hurdle every performance marketers comes across is knowing how to test and optimize their campaigns. This is especially true for anyone running any mobile traffic and can get a little hectic if you don’t have a system. Here are a few things you can do to make sure you’re getting the most out of your offers.

1. Split-Test Devices/Carriers/Operating Systems Alone- When initially running an offer, don’t worry about angles or landing pages right away. In addition to the variables in performance you may typically see on desktop campaigns, a mobile campaign’s performance can be determined by the targeted carrier, type of device, and operating system. Yet, while landing pages may increase conversions and performance, landing pages and angles will only add to the chaos when first testing an offer.
2. Test a Few Different Types of Creatives- It’s important that after you’ve found a winning OS/Carrier/Device combination for your offer, you test right out the gate with a few different angles. Rotate a landing page in there to see if performance picks up.
3. Cut Non-Performing Angles- By this point, you should be able to determine which combination of the aforementioned variables performs best. Obtain a sufficient amount of volume and you’re ready to scale.
4. Test Other Traffic Sources- Once your offer sticks, you can test your targeting/angles on other traffic sources. As mentioned before, various sources specialize in various types of traffic.
5. Test Other Countries – While testing other traffic sources, you can also test other countries. Keep in mind that a majority of the global population also speaks English, so while you can put time into translating your creatives/landing pages, you may be surprised at how well your campaign performs in other countries.

It should be mentioned that before you scale your campaign, you make sure you’ve cut out all other non-performing variables. This way you’ve completely trimmed out the fat of your campaigns before introducing them to another demographic. In summary, don’t be too quick to scale out.

Additionally, some offer types will almost always work better with landing pages while others are just the opposite. So, for example, if you’re advertising a sweepstakes type of offer, you’ll want to use a landing page right away.

If you’re advertising something simple like ringtones or a game though, a landing page may never be necessary.

One question you should always ask yourself before creating any banner, is whether or not your goal is to create awareness of the brand you’re advertising, or if you’re trying to get a user to act immediately.

As a performance marketer, creating brand awareness does not help put food on the table. Remember this rule: Unless you’re promoting your own product, you should never concern yourself with creating an awareness of any service or product you’re advertising.

Below are some mistakes you should avoid and some ways you can avoid them.

Professional-Grade Appearance

It happens all too often; you’ve come up with a “million dollar” idea that you feel deserves a “million dollar” design that would rival Coca-Cola or Doritos. So you fire up Photoshop and get to work.

The problem is, you spend all that time adding shadows, gradients, shapes, and shine effects to your ad, but your message still falls on deaf ears because while your ad may look really good, it just looks too good.

When your an ad looks like it could belong to a multi-million-dollar company, an almost subconscious red flag appears which screams “someone is trying to sell me something”. What typically follows is contempt and in most cases, inaction.

Pro-grade performance marketers know that pro-grade ads will almost always fail. Leave your designer’s jacket at the door and stop wasting time with photoshop’s vast library of effects. Remember, the more amateur, the better.

Vague Benefits

People are by nature selfish creatures. Your users’ primary concern is whether or not your product can make their life any better.

Don’t beat around the bush when telling your users just how much your product or service can benefit them.

If your offer will save them money, give them an average reported savings. If your offer can get them quicker results, give them an exact time frame. Just remember to tell them how quickly they will benefit from your product, in which way, and to what degree.

Long-Winded Copy

When you have a lot to say, you want to say it all. Sometimes we take a long time to say what we want to say because we’re trying to be thorough. Other times our ego drives us to sound smart so we use large words. Whatever the cause, a lot of marketers have an amazing angle, but just can’t seem to spit it out.

The problem here is that users want quick and to the point. The average attention span last just 8 seconds. If in that time you haven’t conveyed your message, they’ll move on to the next attention-grabbing item they see. It’s important to remember to use short, concise, simple, yet descriptive words when expressing your angle.

Using the 20% rule, I like to zoom out my creative until it’s scaled to 20% of it’s normal size. From there, I can tell if there are too many words (which may make my ad look congested and hard to read) or if there’s not enough contrast (which could make my copy and image blend into the background).

Lack of Urgency

Whether or not space is limited, resources are scarce, or membership is reserved, if you’re not conveying to your users that what they’re being offered may never be offered again, they may not feel compelled to act immediately. When you leave time for your users to weigh their options, you’re leaving room for them to just act later. This is fine if you’re a brand looking for eventual customers, but as a performance marketer, you want that user to feel like an action later will result in a missed opportunity.

Mixed Signals

Sometimes marketers try to cover all of the bases when they’re looking for images for their angles. But the wrong image and color-scheme can dilute and mix up your message.

Without diving too far into color-psychology, dark colors along with red, yellow, and orange typically provoke a sense of aggression, anxiety, and sometimes deviant behavior. Bright colors provoke happiness, relief, and wholesomeness.

Blended Colors and Elements

Every performing ad has 4 components: the image, the headline, the body copy, and the call to action. Depending on the size of the ad, you may find it difficult to distinguish your elements from one another and the background itself.

When creating an ad, it’s important to use contrasting colors for your text, images, and background. If your ad looks like a blurry blob, users will likely pass over your ad; and in the event that they stop to read your ad, they may find it too difficult to read and miss your message.

One way I like to make my text and images stand out from the background and from one another is by opening up my images in Photoshop and adjusting the contrast layer there. I also like to use Kuler’s color tool which helps me find contrasting colors for my ads.

Unclear Call to Action

Sometimes using a clever call to action might seem like a good idea, but where there is a vague set of instructions, users are less likely to act in your favor.

Don’t leave anything up to chance when providing an offer to your users. You’ve attracted their attention and created compelling copy, don’t let that go to waste. The best way to avoid inaction is to provide clear-simple instructions on what it is they need to do to “make their life better”.

Today we’re finally launching POFpro, a new premium demand-side ad platform specifically for marketers to track, automate, and scale the Plenty of Fish traffic source, into a public beta.

This product is the proudest thing we’ve ever put out as we continue to transition into a technology-focused, product-obsessed company. We’ve been in private beta with just under 100 users to date and really worked hard to make the most advanced, yet easy to use product.

If you market on POF or have thought about it but found it difficult to get started, this is THE platform for you. POF’s laser sharp demographic targeting capabilities rivals that of Facebook and is perfect for performance marketers and for startups focused on user acquisition in the dating space.

Fully Integrated, Premium Experience

Fully integrated with POF’s self-serve ad system, POFpro aims to transform POF marketing to its simplest, most intuitive form, allowing newcomers to get started much more smoothly, as well as allowing the experienced to scale faster and do it in a fraction of the time.

Currently there isn’t really a solution out there that does what POFpro does. What people have duct-taped together are things that make you export reports from multiple platforms and leave it to you to mash it up in Excel. POFpro is trying to bring the similar premium experience that Facebook Ads API users enjoyed, but to POF Ads.

The basic foundation is we drill down to the specific ROI of a creative with no extra effort from one central interface. Then, with the incredibly granular data, we are able to apply advanced features like rule-based auto-optimization and day-parting, which all contribute to users spending less time monitoring campaigns and to scale faster.

Ben Louie of POF Ads

“I’ve been working with Tom as they’ve developed this technology over the past year,” says Ben, Senior Account Manager at POF Ads. “All I have to say is: just try it out. This piece of technology is a complete game changer for any POF advertiser. If you’re new, they have an expansive training guide that they used to charge for, now it’s 100% free as part of the platform.”

Integration with WhatRunsWhere

In addition, we also did a small integration with the guys at WhatRunsWhere inside POFpro. Users can search by an advertiser, and POFpro will pop out a limited number of ads that runs for that advertiser, as well as key information such as where and how long it has been running.

Get Extended Free Usage During this Public Beta!

The software is currently in public beta, which means there will be no charge to use it for an indefinite period of time (approx. 2-3 weeks), in addition to the 30-day free trial when they officially come out of public beta.

That means if you sign up now, you’ll have 6-7 weeks of free usage ahead of you before you have to pay a single dime. Take advantage of this before it ends!

With as much experience as we’ve had in POF, there are still a lot of questions we have yet to answer and a vast more that we haven’t even thought to ask.
 

That said, recently we decided to tackle one question that’s been in the back of our heads for a little while regarding landing page performance and landing page display resolution.
 

The Big Question

With all of the various screen sizes that exist in the world today, we wanted to find out which display dimensions we should use to create our landing pages to best cater to our POF demographic.
 
So to find that out, we had to ask ourselves: does display resolution affect landing page performance?.
 

Our Preparation

With that question in mind, and a set budget of $500, we started to prepare our test. After a little bit of research, we found a list of the most popular resolutions used in the US.
 
Taking that list, we found 3 resolutions we decided to use

• 1024×768 – “Low-Resolution”
• 1366×768 – “Mid-Resolution”
• 1920×1080 – “High-Resolution”

Finding Our Landing Page

Before we could test the various resolutions we wanted to start out with a landing page that performed well, but that we hadn’t used before.
 
Immediately, we began testing numerous landing pages each varying in design and complexity until we had a steady landing page click-thru of 40%.
 
Since we only cared about how visually alluring the landing page was, we didn’t want to concern ourselves with any other performance metrics like conversion rate or creative CTR.
 
Below was our resulting layout:
 

Live versions:
Low-Res | Mid-Res | High-Res

Campaign Targeting

Once we found our landing page, we then took that design and layout and applied it to our top 3 resolutions as seen in the links above. Each landing page was separated into 3 campaigns all targeting US males ages 30-39 with a login count of <50 which helped us keep everything properly organized.

Setting The Rules

The most important thing about any test is to abide by a strict set of rules.
 
Our rules were simple:

• Use The Same Creatives for each landing page. While we desired the lowest possible cpc, we felt that interfering with the creatives process would skew data. If one campaign needed more creatives, the other two got the same creatives injected as well.
• Stagger Each Campaign’s Bid by just $0.01 each to maintain placement fairness.
• Rotating Bids between the three campaigns each day. This was an attempt to lower the influence of placement on performance as much as possible while preventing two of the same creative appearing at once
• Only Running During The Day to keep an eye on creative performance.

And The Winner Is…

After we spent our budget $500 to find and test our landing pages, we felt we had enough data to draw some conclusions. Before we break down our findings, let’s take a broad look at what we found:

At first glance this may seem a little jumbled, so I’d like to provide the important metrics individually.

CTR (Click-Thru Rate)

The primary focus of these landing pages’ performance was on the landing page CTR. As you can see in the graph above, the landing page catered to the largest display resolution had the highest CTR. While we can only speculate as to why it got more clicks, we have our suspicions.

CVR (Conversion Rate)

Oddly enough, while the high-resolution landing page yielded the best CTR, it also got the worst conversion rate at just 3.96%. Since we only used this one design for this resolution, we can’t know why users clicked to go on to the offer but failed to act. Historical data has shown us that a high click-thru and low conversion rate is mostly due to misleading images or copy, but since the other landing pages had the same content, that doesn’t seem to apply here.

Profit/Loss

Lastly, for those curious about how much the resolution affected our ROI, to the left is a graph which shows how profitable each landing page resolution was. Although the low-resolution landing page had the lowest CTR, with it’s greater CVR, it was the most profitable with $127.40 in profit. The opposite could be said for the high-resolution page which actually lost $27.54 in total.

Conclusions

Taking into consideration the larger images, if users with a smaller screen saw the high-resolution landing page, they might see mostly a set of images scrolling down their screen, thus placing all of the focus on images and not on copy. But if users aren’t seeing our copy, we’re missing out on an opportunity to convince them to act in our favor. This may explain the high CTR but low CVR for the high-resolution page.

Also notice how our landing page is a little wordy; users are more likely to be able to read all of our copy in the low-resolution so that when they clicked to the offer, they had a higher intention of signing up.

Last Words

We can speculate all day as to why one page performed well over the other; but without further testing, we won’t know. What we do know is that the smaller display resolution performed the top 2 most popular by a large margin. Ultimately, take the above data into consideration when you’re designing your next landing page to truly get the best out of your landing pages.

In our previous post, we discussed how useful learning html, php, javascript, and jQuery could be to your digital marketing career. In this post, we wanted to provide some examples showing just how true that can be.

Using jQuery’s library of code, we can create a shaking effect, pulsating effect, and typewriting effect that will draw the user’s attention to any element of our choosing. Let’s take a look…

Fundamentals of Our Code

Since it’s not as easy as it may seem, it’s important to know how to paste our code into our landing pages.

First, you’ll need to make sure that your landing page has a link to the latest version of jQuery which you can download and save for free. Just make sure to save it as a .js file.

Or you can create link to the url they provide at the bottom of their home page onto your landing page.

Next create and attach your external .css file. While you’re not required to use an external .css file, for the sake of keeping everything organized, I highly recommend it.

Lastly, make sure to wrap the functions I provide in a <script> tag and within your <head> tag. Without that, nothing will work.

If you’re not familiar with what I’m talking about, please watch the quick video above to make sure that you’re using these scripts properly.

Getting “Shaky” With jQuery

Maybe you have an important sense of urgency you’d like to convey to the user,but don’t want to risk drawing too much attention away from your headline or call to action. Perhaps you’d like to make your images move around a little when your users move their cursor across the page. The shake effect will help you do just that

Your Code

First, you’ll need to grab the shake code below. Once copied, you can just paste it in between your <script> tags as mentioned in the video. However, before you do that, take a second to look a the code and make sure you append the .shaking_text with whatever Class or ID you’d like the shake to affect.

$(document).ready(function(){
setInterval(function() {
$('.shaking_text').effect('shake',{
/*adjusts how many times the element will shake*/ times:4,
/*adjusts how far (in pixels) the element will shake*/ distance:10},
/*adjusts how fast the element will shake*/ 1000);
},
/*adjusts how frequently the element will shake*/ 5000);
});


Here is an example of what your element will look like when you’re finished editing everything.

Additional Modifications

We can also make the shaking element interactive by switching the setInterval() function with the .mouseover() function. This would cause your element to shake only when the user passed their mouse over the element. Add a .mouseout() function and you get an incredibly responsive effect for any element!

Bring Your Elements Alive With Pulse

Many people like to use the blink text decoration to draw attention to certain elements on their page. The only issue however, is that the incessant blinking can be less eye-catching and more annoying. A better alternative is to make your text pulsate with the .animate() effect.

function pulsate() {
var pulser = $(".pulsing_text");
if(!pulser.hasClass('stop pulsing')){
pulser.animate({opacity:
/*this adjustst how faded the element will get*/ 0.2},
/*this adjusts how quickly the element will fadeout*/1000, 'linear')
.animate({opacity: 1},
/*this adjusts how quickly the element will fade back in*/1000, 'linear', pulsate);
}else{
pulser.animate({opacity: 1},10)
.removeClass('stop pulsing');
}
}
$(document).ready(function() {
pulsate();
/*this will stop the text from pulsing when the user drags their cursor over the pulsing text/element */
$('a').mouseenter(function(){
$('.pulsing_text').addClass('stop pulsing');
});
});

Again, I’ve created some minor notes so that you can adjust the animation to your liking. Just like with the shaking code above, you’ll want to change the values of certain elements to reflect the elements you’d like to animate. So replace .pulsing_text with the class or id of your choosing. Here is an example of what your end result would look like.

Additional Modifications

Notice that with this code, once the user has moved their cursor over the pulsing element, the pulsing stops for that session. Although this is a great way for the user to inadvertently turn off the pulsing element (in the event that they find it annoying), if you’d like to allow the pulsing to continue even after the user has moved their cursor away, just delete everything between the pulsate(); and }); values.

Guide Your Users Across Your Text With Typewriter

This last effect is a great way to draw attention to certain text on your landing page and subtly engaging the users as they’re led across your copy. As the eye is attracted to movement, when certain events occur, you can make it so that your text appears as though it’s being typed in real time by someone.

var text = "";
var count = 0;
var maxspeed = 150;
$(document).ready(function(){
function type_what_you_want(your_text){
text = your_text;
type();
}
function character(start, end, text){
return text.substring(start, end);
}
function type() {
var random = Math.floor (Math.random() * maxspeed);
setTimeout (type, random);
$('.headline').append(character (count, count+1, text));
count++;
}
type_what_you_want (
"This Is A Headline That Grabs Attention!");
});

Once pasted in you’ll get something that looks like this. There really isn’t much modification with this one, since it’s pretty basic. You can adjust how quickly your text is written by adjusting the max speed variable (var: maxspeed=) at the top. Aside from that, you can replace the “This is A Headline[...]” text with whatever of your choosing.

Last Remarks

These are some pretty basic yet wonderfully effective jQuery effects you can use on your landing page. But keep in mind, these examples are just a tip of the iceberg. We wanted to provide these techniques to connect with our previous post on learning code to show people how useful it can be to brush up on your javascript, php, and html knowledge in relation to digital marketing. So explore and try out some of the other useful jQuery tools out there.

If you’re not a native coder, then it’s likely that in your internet marketing career, you’ve come across some HTML code to an incredible website that you’d like to use, but couldn’t make heads or tails of it.

In cases like these, people either: 1) dismiss the site as too complicated and settle for continued mediocrity; or 2) dive further into the code and begin the process of learning. Those who dive further typically go to become successful while those who choose to settle wind up giving up in marketing altogether. So what should you do?

What’s In It For You?

The obvious incentive to learn code is to be able to implement some crazy new idea that may have just popped into your head. Have you ever wanted to set up your own independent site? Are you tired of paying fees to some 3rd party system for a service that you could easily manage yourself at a fraction of the cost and with greater control? Are you tired of relying on paying for mass-marketed submit forms, landing page designs, and a restrictive terms of service? All of these things can be avoided, allowing you to step up your sales game without paying a monthly fee.

Gain The Ability to Communicate More Effectively

Not to mention, in the event that you’d like to continue outsourcing some of your tech work, with a greater understanding of code, you’ll be able to quickly and easily articulate to a developer what you’re looking for without getting lost in translation resulting in unwanted results and wasted time.

More Professional Appearance

Learning CSS and HTML will help you create more professional-looking web pages which will help to increase the credibility of the service or product you’re promoting, while JavaScript and jQuery will help you create more interactive elements that will get your users more engaged and excited about your content

Finding a Course of Action

So you’ve decided that you’re finally going to dive into some code. The only question is, with so many resources and tools out there, which one(s) should you choose and which areas should you focus on?

Start With The Basics

There are so many ways to create a webpage these days that finding out where to start can be difficult. I would advise you to first start out with HTML and CSS. That will take care of most of your design for your web pages. Next, begin with the basics of PHP and JavaScript; which will help you to create more responsive web pages.

There a plethora of resources and tools available that can help you easily learn these things at your own pace. Below is what I suggest.

Go to Class

A lot of marketers out there can effortlessly list off their top 5 favorite books on writing copy but few will be able to tell you about their favorite book on writing code. That’s because reading code is boring. Fortunately, there are a few individuals who have made it easier to learn code online.

Presenting: Codecademy

Codecademy is definitely one of the best sources for learning HTML out there. With easy to follow and engaging courses, you’ll feel like you’re in your own personal classroom. You can select what you’d like to learn, and a structured lesson will be provided for you. It’s as easy as setting your goals in the sign-up page and clicking through each session.

Get The Right Tools

If you’ve seen any of my landing page tutorials, you’ve probably noticed that I like to use Dreamweaver. It may not be free, but it’s definitely worth the investment. Adobe has a myriad of design and coding software that sometimes blow my mind and Dreamweaver is at the top of my list. It will help to keep you ahead of the learning curve when trying to understand html with its “What You See Is What You Get” (WYSIWYG) side-by-side code and design view, and comes with a 30-day free trial.

Free “WYSIWYG” Alternatives

If you’re looking for a free WYSIWYG web design alternative, you can check out CoffeeCup, Kompozer, and/or Easel. We created a video tutorial on how to create a landing page with Easel a while back with some good feedback, so I wanted to take the opportunity to point out some other great online web page design tools. Just keep in mind that when using these free online tools, you’re limited by what you can do and usually you get a bunch of excess code. So it’s alright to use these if you’re looking for some ideas on how to build out from some code, but they can be clunky.

My advice, splurge for the big guy at Adobe and you won’t regret it.

Sit Back and Watch Some Videos

If up until now you were lamenting the idea of reading a bunch of boring lessons on coding, you can breathe a sigh of relief. Fortunately, for the more visual learner, there are videos out there that will teach you how to code.

Intro to Dreamweaver by Mike Sloan

This 3-part video series consists of over 200 minutes of Ontario Professor in Marketing, Mike Sloan, teaching his students how to navigate Dreamweaver to build a website. Also included along with these videos is an online course book that you can use to get caught up with his teachings if you’re completely unfamiliar with html. These videos by Mike Sloan are easy to follow along with, and educational at the same time and not only will teach you html but how to navigate the somewhat complicated Dreamweaver CS6 as well. With an average score of 4.8 on ratemyprofessor.com, you’re likely to enjoy his teachings as well.

Adobe TV

Yet another reason to get Dreamweaver is the support you’ll get in how to properly take full advantage of all of its features when you go to their free video course which gives a step-by-step guide on how to use all of the useful design features that Dreamweaver provides. This is a must-use for any Dreamweaver user out there.

Step Up Your Game

At the end of the day, you should strive to be the best at what it is you do. That said, if you’re in online marketing, you can’t be the best if you completely ignore the tech side of your work. Your progress will only continue to be stunted if you require other people to get your ideas rolling.

This post will take you the steps of how to easily install and setup email submit forms in your website using the autoresponder Mailchimp and an easy-to-use submit form design tool.

Mailchimp List Building and Management

Mailchimp is an email autoresponder that allows you to build and manage email lists from your website’s traffic. It lets you to create opt-in forms which you can place anywhere on your website in an attempt to keep in contact with your traffic and gives you the ability to tell your users about new products, services, discounts, or updates you might have to offer them.

Getting Started

As you’re guided through the setup process after you’ve created your free account, you can choose the layout and design of your opt-in form along with your confirmation page, thank you page, and about 12 other responses or forms. The design interface for the forms in Mailchimp makes form creations incredibly simple.

The Sign Up Form

As I mentioned at the beginning of this post, we‘re also going to explore a simple submit form design tool that will really make your submit form pop. So I’m not going to discuss the different designs of the form. Just make sure that you’ve properly included all of the inputs you would like to use in your submit form (like “name” and “email”).

Placing Your Form On Your Page

After you’ve included all of your inputs, you can click on “Share It” which then brings you to a page where you can view where your subscribe form lives along with an option to embed a small subscribe form into your web page (which then leads them to your subscribe form). However, if we want to utilize other submit form designs, we’ll need to get creative.

Copy and Paste the Code Into Your Page

First you’ll need to navigate to the url where your submit form lives. Once you’ve clicked on the url, you’ll be brought to a page with the form you just created. Next, you can just right click over the page, and click “view page source”. When the code pops up, you can start copying all of the code you see except for what’s inside the <style type=”text/css”> tag. Since we’re using a different submit form design though, we don’t need all of that .css stuff. Of course, if you want to keep the styles, I would suggest placing them in a .css file and linking to that style sheet in your web page.

Introducing: UI Parade

Once you’ve edited and pasted your submit form from into your web page, you can head on over too UI Parade to design a sleek submit form. UI Parade is a website where designers share some of their interface design ideas.

But UI Parade isn’t just a showcasing site where you might be able to find some design inspiration, it’s also home to UI Live Tools; a free online design app center that allows you to easily create your own UI elements with almost no coding knowledge.

Form Builder

UI Livetools has 4 tools that allow you to create buttons, ribbons, icons, and submit forms. Just select the Form Builder to begin designing your submit form. Once inside, you can choose the color gradient of your entire form including shadows and highlights, as well as the color of your text input fields, lables, and the design of your submit button.

Full CSS Design

Perhaps the greatest feature of the UI Livetools is not their usability, but the fact that the design is all html/css based. That way, everything looks sleek and professional without requiring a bit of coding knowledge. While this design tool may not be robust, it certainly is easy to work with and is visually appealing.

Placing Your Designed Form Into Your Web Page

Once you’ve designed your submit form, you can grab your custom code by clicking the “Generate HTML” and “Generate CSS” buttons and placing that content into your web page’s PHP/HTML file. To keep things clean, you may want to save your form’s css in a separate style sheet. Next, you just need to edit a few input variables, and you’ll be ready to go!

Finishing Up With Some Edits

After you’ve grabbed the html for your newly-designed submit form, you’ll need to change some things in your code. Keep in mind that you still need some of the values you pasted in from the form code you got from Mailchimp. So What you need to do is create a sort of hybrid which crosses the input values, actions, and ids from Mailchimp and the design code from UI Parade. Below is a basic example of how you’ll need to change your code:

In the above code, the red is what I had to add from Form Builder to the existing code I got from Mailchimp whereas the gray is what was deleted from the code I got from Mailchimp. What you should be left with is what’s in red and black.

Once you’re all done changing your code, you can then place this form anywhere on your web page and you’ve got a css-designed email submit form that will help to make your submit pages look unique, clean, and professional

Before we began developing the fully-comprehensive campaign management platform, we had to become well-versed with the intricacies of subIDs and the weight they hold in tracking. At the same time, while subIDs are ubiquitous in internet marketing, it’s become apparent to us that a lot of online marketers don’t quite understand what a subID is and how crucial it is to their success. Follow along to understand what a subID is, how it can be tracked, and what you can do to keep your conversions.

1 What’s a SubID?

First things first, what is a subID? When a user clicks on your ad, a unique number is generated and is used as an id for each click. That unique number is called a subID. Without a subID, conversions cannot be properly tracked. It should be noted that whatever tracking system you’re using both creates and logs each subID generated.

2 Sending the SubID: How Your Tracker Communicates to the Network

When the user clicks on your ad that number then travels through your sales funnel until it ultimately lands on an offer page. From there, the network captures that unique number and logs it in their system. However, first your tracking system needs to know how to properly communicate with the network with the offer so that it knows what number is the subID. This is done by appending the offer url you receive from the network with a subID placeholder, entered after the subID parameter.

Ex: http://www.offer.com/html?&AFFID=001CID=0001&SID=|append here|

Using SubID Placeholders As A Universal Translator

In Prosper202 that placeholder is “[[subid]]” while in POFpro you would use “{subid:}”. Without these place placeholders, your tracking system has no idea where to place the uniquely-generated number for each click and ultimately, the network has no way of knowing which x-digit number which your tracking system has just sent them is the subID.

Once your placeholder is set, your url (once a user has clicked on your ad) would look like this:

Ex: http://www.offer.com/html?&AFFID=001CID=0001&SID=12345678901

Logging Your SubID

Next, the subID gets logged and the network monitors the user activity associated with each subID. If the user does nothing, the network has nothing to report. However, if the user decides to opt-in to an offer or buy something, a notification is sent to the network along with the unique subID, identifying which click led to the sale/opt-in. This is known as a fired pixel. Almost simultaneously, the network sends a notification back to your tracking system which simply contains the subID that resulted in a conversion.

3 Receiving the SubID: How the Network Communicates to Your Tracker

Once a conversion has occurred, there are multiple methods which a network can use to tell your tracking system which subID (click) was responsible for a conversion. The most common methods are image pixels, iframes, and server postbacks.

Iframes and Image Pixels

With an iframe and image pixel, the subID information is already attached and ready to be sent out once the conversion pixel fires. These two mechanisms are cookie-based and are ready to be sent back to your tracking system upon notification of a conversion. However, since these mechanisms are based on cookies, latent conversions may not get properly credited to your account due to the fact that cookies get cleared after a certain amount of time, while some users may turn off 3rd party cookies, thus diminishing the ability for your system to track properly.

Postback URLs

The 3rd method involves server postbacks which allows for server-to-server communication. Once set up, this allows the network’s server to communicate with your tracking server by way of a postback url. The postback url acts as a vessel in which the advertiser can send to the converted subID back to your server resulting in a tracked conversion. However, your postback url (when placed into a network’s offer) needs to be properly appended with a dynamic token assigned by the network so that the network’s server knows what value to send back after a conversion. The purpose of a token is to dynamically insert the conversion subID from the network’s log into the url you provided back to your server. Without this token, the network doesn’t know where to place the conversion subID and cannot properly communicate with your server.

Network SubID Tokens

One major tracking system that a lot of networks use is CAKE. So, for example, to track subIDs, you would append your postback url with their subID token (#s1#) like so:

http://www.yourtrackingsystem.com/tracking.html?&SUBID=#s1#

However, many networks still do not use CAKE and will likely require a different token. So before you place your postback url, it is important to speak with your network AM to find out what that might be.

4 What’s Best For You?

It should be stated that image pixels and iframes are both simple and easy for networks to place and implement. It’s because of the relative convenience in image and iframe tracking that some networks don’t even bother with server postbacks. Ultimately any network would be remiss if they didn’t tell you that server to server tracking is more accurate and more reliable that image and iframe tracking.

Combine Postback URLs and Pixel Tracking For Tracking Insurance

Since it’s based on the length of a php session and doesn’t need to be loaded on the page (like tracking pixels) server tracking is more accurate than pixel tracking. That said, server tracking is only accurate if the time between the click and the conversion aren’t too far apart.

For example, in server tracking, the postback URL will not catch any conversions when the clicker converts 20 days later. Ultimately, a lot of marketers will employ both postback and pixel tracking. The accuracy of a postback compliments the elongated reliability of a pixel.

So when you’re trying to figure out which tracking mechanism you should use when you’re trying to find the best way to track your conversions, keep in mind that there is both a variety of choices with advantages and disadvantages in all.

Earlier this week, POF came out with some new and improved ad guidelines. In light of these new changes, I’d like to try to shed some light on the situation and tell you why it’s not all that bad.

POF Introduces an Updated Set of Guidelines

POF has grown quite a bit in the last few years. But with rising popularity with both marketers and users, POF was reportedly receiving an increasing number of complaints from their users about an excess of lewd images.

Yet, while explicit images were not permissible, pictures of shirtless men and women in provocative bikinis outdoors were almost becoming commonplace. So in an attempt to retain user experience, they came out with a new set of guidelines:

1. No Bikinis (1-piece swimsuits as well)
2. No Short Skirts (nothing shorter than mid-knee length)
3. No Bare Stomachs, ie. Midriff, on women
4. No Nude Torsos (topless males from the shoulder up are acceptable)
5. No Short Shorts
6. No Pictures of People That Look <20
7. No Images of People with a “Sexual Expression” On Their Face

Essentially, if it’s not work-appropriate, the approval team has been instructed to decline your ad. This means that if your images contain women in tight dresses or who resemble adult entertainment employees, they will likely be declined.

POF Also Introduces Retroactive Declines

Not only will new ads be required to follow the new guidelines, old ads will too. This is because for the first time, POF will be conducting ongoing retroactive denials.

Retroactive denials means ads which were previously compliant under the old guidelines will not be grandfathered in and will be subjected the same approval process as new ads, resulting in a more leveled playing field

Along with these new guidelines, there will also be a greater emphasis on consistency with the approval team. While in the past this has been a minor issue with POF, their mentioning of enforcing these rules more diligently is encouraging.

5 Things to Look Forward To With New Guidelines

At first glance, these new guidelines may be incredibly discouraging to a lot of people out there. But change isn’t always a bad thing. Before dismissing these guidelines as a completely negative thing, consider the benefits of running on a stricter advertising platform:

1. Higher Quality Leads – Abandoning superficial tactics will force marketers to rely more on creating ads with more substance.
2. Wider Variety of Offers – As a trend of higher quality leads from POF begins to develop, more advertisers will want POF’s traffic and more of it.
3. Payout Increases - At the same time, current advertisers will be more willing to pay you more for your POF traffic.
4. Greater Sustainability - With a greater volume of higher quality traffic, your chances of getting kicked off of an offer for a working campaign will decrease dramatically.
5. Equal Footing - Lastly, those annoying legacy ads that have somehow continued to undermine the compliance guidelines will finally be a thing of the past, placing you at equal footing with your competition.

The new guidelines mean that many POF marketers will have to re-think how they design their campaigns. No longer will people be able to rely on superficial, cheap tactics of raw sex appeal.

Also bear in mind that your landing pages will not be subjected to these new guidelines. So while some of your old ads may be getting declined, your landing pages will still be compliant.

Turn Lemons Into Lemonade

Think of the long-term gains. For instance, you may find that maintaining success in POF under these new conditions may inadvertently teach you how to create angles that could be applied to campaigns on other traffic sources.

As previously mentioned, without the use of lewd images, you will have to rely on your ability to tap into deeper emotional triggers to get users to click and convert resulting in a more universally applicable campaign.

Plus, while these changes were sudden, everyone appeared to find out at the same time without much notice. So while we wish that the community would have gotten a “heads up” of sorts, at least a majority of people out there got equal notice, leveling the playing field even further.

A Little Bit of Advice

There will be a lot of affiliates who will undoubtedly give up on POF because of the new guidelines, so take these upcoming weeks as an opportunity to take a higher share of POF traffic and innovate with new rising POF paradigm.

What you should also do is talk to your network AMs and advertisers about allowing POF traffic with its new advertising guidelines. Let them know that traffic quality is on its way to an upward trend and that you’d like to test their offer to see if it works for them now.

Some Final Words

Keep in mind that you still have access to one of the most comprehensive targeting ad platforms available today. While you may not be able to use the same images you used in the past, you can still target to any niche out there.

Ultimately, continue to explore new ideas and develop new angles while you have the chance.