Create a Dynamic Offer Page for Email for Media Campaign Follow

Prerequisite

To get the most out of this tutorial you will need to have:

  • Installed The Pill and set up a working EM4 campaign. Check out the Email For Media tutorial.
  • Working knowledge of HTML, CSS, Firebug and how to delete cookies.
  • Also note, for PHP files to work correctly, you will most likely need to upload and view them from your web server.

Overview

As you have seen from installing The Pill and setting up your first E4M campaign, the download page generated by email.php has a single call to action.

See an example of unmodified email.php file.

It’s possible to customize this page to:

  1. Funnel the user to other sections of your site, add additional messaging, and have more than one call to action.
  2. Set up the page so that if it’s shared, a sign up button is displayed versus the confirm & download button.

This tutorial will explain how to:

  1. Create a custom download page for email.php
  2. Create a download page that displays dynamic content based on whether the user entered the page through a confirmation email or from a direct link to the page.

Install from Templates (Advanced users)

If you are comfortable reading HTML, CSS and PHP, and have solid a grasp on how email.php works, download the templates, and follow this list of instructions:

  1. Modify the setcookie vars in set-cookie-c01.php
  2. Modify the setcookie vars in download-c01.php
  3. Upload all files to the same directory on your server
  4. Create an E4M widget and set the Confirmation URL to point to: http://yourwebsite.com/set-cookie-c01.php (Make sure you add a product image or song to the widget)
  5. Modify content in divs: id=”cookie-not-set” and id=”cookie-set” within download-c01.php to show custom content.

Sample Examplehttp://ghosts.wrvrywhr.com/e4m-tutorial-01/email-confirm-c01.php
(The first time you go here, the cookie is not set, and you will see an E4M widget)

Working Example: http://thegoatmusic.com/

How to Modify Stock Topspin Files

The instructions below will take you through the steps needed to modify the stock Topspin email.php file.

Step 1: Set up email.php to display an external file as the download media confirmation page.

Why are we doing this? 
This is the first step in modularizing the EM4 flow so that creating multiple custom E4M campaigns will scale with minimal effort.

Make sure you have downloaded the stock PILL to get started.

  1. Create a new folder, and copy email.php into it
  2. Rename the file email-confirm-c01.php
  3. Create a new file in the directory, name it: download-c01.php
  4. Open email-confirm-c01.php and copy and then delete the HTML section right after: # FORM HAS NOT BEEN SUBMITTED SHOW THE FORM. Here is the section:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Confirm and Download</title>
    <style> #maincontainer { width:570px; border:3px solid #cccccc; margin:15px auto; padding:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; } </style>
    </head>
    <body>
    <div id="maincontainer">
    <h3>Confirm And Download</h3> Click "Download Now" to download your selected digital items. All media will be downloaded to your desktop or your download folder.<br/><br/>
    <!-- DO NOT MODIFY THIS AREA -->
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
    <input type="hidden" name="fan" value="<?=$_GET['fan']?>"/>
    <input type="hidden" name="campaign" value="<?=$_GET['campaign']?>"/>
    <input type="image" value="Download Media" src="https://static.topspin.net/topspin/application/widget_support/email_for_media/confirm_link.jpg">
    </form>
    <!-- END NO-MODIFICATION -->
    </div>
    </body>
    </html>
    Edit Plugin:code
  1. Paste the section into the blank document download-c01.php. Save.
  2. Go back to email-c01.php and paste: include(”download-c01.php”); on the line after: # FORM HAS NOT BEEN SUBMITTED SHOW THE FORM, and then save. The section should look like this when done:

 

<?php
if (empty($_POST['campaign']))
{
if ($_GET['has_media'] != "false")
{
# FORM HAS NOT BEEN SUBMITTED SO SHOW THE FORM
include("download-c01.php");
?>


Now that these files are modified, lets test to make sure everything is working. 

  1. Create a directory on your web server named: yourwebsite.com/e4m-tutorial-01/ — I created:http://ghosts.wrvrywhr.com/e4m-tutorial-01/
  2. Upload both files to that directory.
  3. Everything is working if:

yourwebsite.com/e4m-tutorial-01/download-c01.php 
yourwebsite.com/e4m-tutorial-01/email-confirm-c01.php

Look the same.

See working examples here:

http://ghosts.wrvrywhr.com/e4m-tutorial-01/ex01/download-c01.php 
http://ghosts.wrvrywhr.com/e4m-tutorial-01/ex01/email-confirm-c01.php

Step 2: Create a file to set a cookie and then redirect to email-confirm-c01.php

Why are we doing this? 
This file will be used to set a cookie for users that have clicked the Confirm and Download link in the opt in email.

  1. Create a file and call it: set-cookie-c01.php
  2. Paste this code into it:

 

<?php
setcookie ("CookieName","CookieValue", time()+86400);
$location = "http://YOURDOMAIN-NAME.com/e4m-tutorial-01/email-confirm-c01.php?fan=" . urlencode($_GET['fan']) . "&campaign=" . urlencode($_GET['campaign']);
header('Location: ' . $location);
exit;
?>


And change these values: 

CookieName 
CookieValue 
YOURDOMAIN-NAME.com

Here is what I used:

 

<?php
setcookie ("tutorial","e4m01", time()+86400);
$location = "http://ghosts.wrvrywhr.com/e4m-tutorial-01/email-confirm-c01.php?fan=" . urlencode($_GET['fan']) . "&campaign=" . urlencode($_GET['campaign']);
header('Location: ' . $location);
exit;
?>


More on setcookie here:  

http://us.php.net/setcookie 
http://www.w3schools.com/php/func_http_setcookie.asp

-

Now let’s test to make sure the code is working.

Test Redirect:

  1. Upload set-cookie-c01.php to the same directory as email-confirm-c01.php
  2. Point your browser to the file: set-cookie-c01.php

Mine is: http://ghosts.wrvrywhr.com/e4m-tutorial-01/ex02/set-cookie-c01.php

If everything is working propererly the URL should take you to: email-confirm-c01.php

Test for Cookie: 
Once you are on the page: email-confirm-c01.php, open firebug and type: document.cookie into the console. The output should be: “CookieName=CookieValue”

See a video on how to do this: http://screencast.com/t/3yVYm6oQ

Step 3: Set Up E4M widget on Topspin with a product.

  1. Create an E4M widget within Topspin and set the Confirmation URL as: http://yourwebsite.com/e4m-tutorial-01/set-cookie-c01.php - Make sure you add a product image or song to the widget.

I set mine to point to here: http://ghosts.wrvrywhr.com/e4m-tutorial-01/set-cookie-c01.php

Step 4: Now that we have all the parts set up, we can now set up download-c01.php to either show the Confirm and Download link, or an E4M widget.

Open download-c01.php. 
In the head of the document, paste this code: 

<style type="text/css">
/*<![CDATA[*/ body.cookie #cookie-not-set { display: none } body.nocookie #cookie-set { display: none }
/*]]>*/
</style>


Before the </body> tag, paste the code below and replace CookieName and CookieValue with with the values you set in Step 2. 

 

<script type="text/javascript">
if( document.cookie.match("CookieName=CookieValue" ) )
document.body.className = "cookie";
else
document.body.className = "nocookie";
</script>


Mine looks like this: 

 

<script type="text/javascript">
if( document.cookie.match("tutorial=e4m01" ) )
document.body.className = "cookie";
else
document.body.className = "nocookie";
</script>


Go to the section that contains the Confirm and Download section, and surround it with this div: <div id=”cookie-set”></div>. It should look like this:  

<div id="cookie-set">
<h3>Confirm And Download</h3> Click "Download Now" to download your selected digital items. All media will be downloaded to your desktop or your download folder.<br/><br/>
<!-- DO NOT MODIFY THIS AREA -->
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<input type="hidden" name="fan" value="<?=$_GET['fan']?>"/>
<input type="hidden" name="campaign" value="<?=$_GET['campaign']?>"/>
<input type="image" value="Download Media" src="https://static.topspin.net/topspin/application/widget_support/email_for_media/confirm_link.jpg">
</form>
</div>
<!-- END NO-MODIFICATION -->


Under this div create this div set: <div id=”cookie-not-set”></div> 

  1. In this div, place the code for the E4M widget you made:

 

<div id="cookie-not-set">Embed Code For Widget</div>


Mine looks like this:  

<div id="cookie-not-set">
<center><object type="application/x-shockwave-flash" height="80" width="300" id="TSWidget6015" data="http://cdn.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf?timestamp=1250194303" bgColor="#000000"> <param value="always" name="allowScriptAccess" /> <param name="allowfullscreen" value="true" /> <param name="quality" value="high" /> <param name="movie" value="http://cdn.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf?timestamp=1250194303" /> <param name="flashvars" value="widget_id=http://cdn.topspin.net/api/v1/artist/854/email_for_media/6015?timestamp=1250194303&amp;theme=black" /></object></center>
</div>


Save and Upload. 

Test to make sure everything is working.

  1. Delete all cookies
  2. Go to: http://yourwebsite.com/e4m-tutorial-01/email-confirm-c01.php — Mine is:http://ghosts.wrvrywhr.com/e4m-tutorial-01/email-confirm-c01.php — You should see the E4M widget.
  3. Now go to: http://yourwebite.com/e4m-tutorial-01/set-cookie-c01.php — Mine is:http://ghosts.wrvrywhr.com/e4m-tutorial-01/set-cookie-c01.php — You should see the Confirm And Download message.

Now it’s time to test to make sure the file can be downloaded.

  1. Clear cookies again.
  2. Goto: http://yourwebsite.com/e4m-tutorial-01/email-confirm-c01.php  and sign up with the widget.
  3. Click the confirm link in the email. This should take you to: http://yourwebsite.com/e4m-tutorial-01/email-confirm-c01.php  with a Download and Confirm Button.
  4. Click Download and Confirm.

See a working example: http://thegoatmusic.com/

Tutorial and method created by Parker Todd Books. 
Big shouts go out to Mr Lucas Gonze for writing the The Javascript and PHP. 
And, to Mr Tim Read for modifying the setcookie PHP.

Comments on how to do this better are welcome. Pease leave any questions you have in the comments.

Have more questions? Submit a request and our team will be able to help get you sorted.
Powered by Zendesk