Tutorial: Match your PAS Site

This tutorial is to help new publishers get up and running with a PAS site that matches their existing site. It is expected that you have some HTML/CSS knowledge and understand how your primary site works. To do this, there are a few relatively simple changes which will make a huge impact:
1. Background Color
2. Container Widths (page width, column widths)
3. Header (logo, etc)
4. Fonts (paragraphs, headings, etc)
5. Primary/Top Navigation from “main” site

In this example, I will use the 2 Column Fixed Width Blue template as the starting point. All changes are in one of 3 file in the CMS:
css > layout.css
css > theme.css
layout > layout.html

NOTE: For info on how to add images and use them inline or as background images, first read the post on how to Upload/Add Images.

1. Background Color
This is the easiest change and is pretty straightforward.

theme.css, line 2

body {
background: #6A8FB5;
font-family: Arial, Helvetica, sans-serif;
}

2. Container Widths (page width, column widths)
All of the container widths are set within layout.css. Adjust the width of each and don’t forget to update margins/padding as well.

layout.css

body {
text-align: center;
margin: 0 auto;
}

#container {
width: 825px;
margin: 0 auto;
overflow: hidden;
}

#leftside {
float: left;
width: 200px;
padding: 10px 0 0 0;
margin: 0 0 0 10px;
}

#content {
text-align: left;
float: right;
width: 600px;
padding: 10px 0 0 0;
margin: 0 10px 0 0;
}

3. Header (logo, etc)
HTML
First you need to copy the HTML from the primary domain. Then paste/save in over the “Rakeback by sitename” text. If you have an image such as a logo, be sure to upload to the CMS and update path in the HTML.

layout.html, line 22

<div id=”header”>
Rakeback from {{ site_name }}
</div><!– end header –>

CSS
There are likely some styles you will want to copy over for the items like a logo, header background, heading text, etc. I recommend placing all relevant CSS at the end of theme.css. Also, you may want to adjust header div here:

theme.css, line 39

#header {
background: #234E81;
color: #fff;
padding: 15px;
font-size: 22px;
text-align: left;
}

4. Fonts (paragraphs, headings, etc)
All changes are within theme.css.

Paragraphs
theme.css, line 23

p {
margin: 0 0 12px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
color: #000;
}

Headings
theme.css, line 64

/* HEADINGS */
h1.pas {
color: #2F65A8;
font-size: 20px;
font-weight: bold;
border-bottom: 2px solid #2F65A8;
margin: 0 0 8px 0;
}

h2.pas {
color: #2F65A8;
font-size: 14px;
font-weight: bold;
margin: 0 0 6px 0;
}

h3.pas {
color: #000000;
font-size: 12px;
font-weight: bold;
margin: 0 0 4px 0;
}

5. Primary/Top Navigation
Most sites which get integrated already have a top navigation which means that the PAS pas_nav_top content has to be moved into the sidebar.

HTML
First you need to copy the navigation HTML from the primary domain. Then paste over the pas_nav_top div. If you have an image such as a logo, be sure to upload to the CMS and update path in the HTML.

layout.html line 25-39

<div id=”header”>
Rakeback from {{ site_name }}
</div><!– end header –>
<div id=”pas_nav_top”>
<ul>
<li><a href=”{{ tld }}”>Home</a></li>
{% if signed_in %}
<li><a href=”{{ tld }}/my-account/my-account.html”>My Account</a></li>
{% else %}
<li><a href=”{{ tld }}/members/new”>Sign Up</a></li>
{% endif %}
<li><a href=”{{ tld }}/rakeback-offers.html”>Offers</a></li>
<li><a href=”{{ tld }}/promotions/promotions.html”>Promotions</a></li>
<li><a href=”{{ tld }}/refer-a-friend/refer-a-friend.html”>Tell A Friend</a></li>
<li><a href=”{{ tld }}/faq.html”>FAQ</a></li>
<li><a href=”{{ tld }}/member_tickets/”>Contact Us</a></li>
</ul>
</div><!– end pas_nav_top –>

<div id=”leftside”>

Since the PAS top nav is now gone, we need those items placed in the sidebar. Paste the following over the existing pas_nav_side and pas_login section of divs. Be sure to get the first token ‘if signed in’ all the way to ‘endif’ token. I’ve highlighted the tokens to show where logic tokens are.

{% if signed_in %}
<div id=”pas_nav_side”>
<ul>
<li class=”header”>Navigation</li>
<li><a href=”{{ tld }}/my-account/my-account.html”>My Account</a></li>
<li><a href=”{{ tld }}/my-account/statistics/statistics.html”>Statistics</a></li>
<li><a href=”{{ tld }}/my-account/trackers/trackers.html”>New Tracker</a></li>
<li><a href=”{{ tld }}/my-account/trackers/existing-trackers.html”>Existing Trackers</a></li>
<li><a href=”{{ tld }}/refer-a-friend/refer-a-friend.html”>Tell A Friend</a></li>
<li><a href=”{{ tld }}/my-account/payments/payments-index.html”>Payments</a></li>
<li><a href=”{{ tld }}/my-account/profile/profile-page.html”>User Profile</a></li>
<li><a href=”{{ tld }}/promotions/promotions.html”>Promotions</a></li>
<li><a href=”{{ tld }}/faq.html”>FAQ</a></li>
<li><a href=”{{ tld }}/member_tickets/”>Contact Us</a></li>
<li><a href=”{{ tld }}/logout”>Logout</a></li>
</ul>
</div>

{% else %}
<div id=”pas_login”>
<form name=”login” method=”post” action=”{{ stld }}{{ login_path }}”>
<table cellspacing=”0″ class=”pas_form” width=”190″>
<thead>
<tr>
<th colspan=”2″>Login</th>
</tr>
</thead>
<tbody>
<tr>
<th>Login</th>
<td><input name=”login” id=”login” class=”login” value=”{{ login }}”></td>
</tr>
<tr>
<th>Password</th>
<td><input name=”password” id=”password” class=”login” value=”” type=”password”></td>
</tr>
<tr>
<td></td>
<td><input type=”checkbox” name=”remember” value=”1″ “checked”> Remember Me</td>
</tr>
<tr>
<td align=”right”><input type=”submit” value=”Login” class=”pas_button”></td>
<td><a href=”{{ tld }}/user-login/password-reset.html” class=”pas_button”>Password Reset</a></td>
</tr>
</tbody>
</table>
{% form_authentication %}
</form>
</div>

<div id=”pas_nav_side”>
<ul>
<li class=”header”>Navigation</li>
<li><a href=”/”>Home</a></li>
<li><a href=”{{ tld }}/members/new”>Sign Up</a></li>
<li><a href=”{{ tld }}/rakeback-offers.html”>Offers</a></li>
<li><a href=”{{ tld }}/promotions/promotions.html”>Promotions</a></li>
<li><a href=”{{ tld }}/refer-a-friend/refer-a-friend.html”>Tell A Friend</a></li>
<li><a href=”{{ tld }}/faq.html”>FAQ</a></li>
<li><a href=”{{ tld }}/member_tickets/”>Contact Us</a></li>
</ul>
</div>
{% endif %}

CSS
Again, just copy relevant CSS from primary domain and paste at the bottom of theme.css. Update paths for any background images.

Summary
This is a fairly top level overview of how to match a PAS site. If you have any questions, feel free to contact me with questions at

mschindler@fourcubed.com

.

Conversion Rates and Retention: Are you paying attention?

One of the most integral parts of being a successful poker affiliate is putting time into testing the offers on your website. Why does Poker Room X have the top spot on your site? It may be that the offer pays you the highest commission. It could be that the room is one of the largest and most popular sites on the web. While returns and popularity are important when determining your offer layout they shouldn’t necessarily be the driving factor.

Let’s say the offer for Poker Room X pays you 35% revenue share while the offer for Poker Room Y pays you 30% revenue share. The extra 5% commission is obviously nice but it doesn’t necessarily mean your long term net income will be higher with Poker Room X. In this example, let’s say Poker Room Y converts at a rate 15% higher than Poker Room X. Furthermore, the player retention rate for Poker Room Y is 27% higher than the retention rate for Poker Room X. You are far better off going with Poker Room Y. Long term your return will be higher and your players will be happier.

It’s VERY important to look at conversion rates and retention when ordering your offer list and call to actions. Run a stats report in your PAS Admin. See which rooms are converting the best and where you are seeing the highest retention and monetary return on your players. Then layout your offers accordingly using the PAS Website Offers Admin or your own CMS.

Tony