There are a lot of ways you can promote CPA affiliate offers with paid traffic. Two of the most common methods are with a landing page or direct linking.

Direct linking doesn’t always work because most of the time the offer pages aren’t very good at converting cold traffic into leads/conversions. However, sometimes you will find some offers that just work much better direct linked.

It’s not very common, but it does happen.

I use landing pages in just about every campaign I run. Landing pages can give you many benefits over direct linking, allowing you to better monetize the traffic you’re buying.

If you do find an offer that’s a unicorn and doesn’t need a landing page how do you get the same benefits that a landing page provides?

Simple. An iFrame “landing page”.

What is an iFrame?

An iFrame is HTML code that loads another website inside of your website URL. The code for an iFrame looks like this:

<iframe src="https://example.com"></iframe>

The above code would make example.com load on my domain and the user most likely wouldn’t even know they’re viewing the example.com website.

The above HTML tag is the most simple implementation of an iFrame. There are actually a lot of attributes you can use with iFrames and depending on the affiliate offer you might need them.

You can find an entire explanation of an iFrame HTML tag and the attributes you can use here in the MDN Web Docs.

Pros and Cons of Using an iFrame

Iframes have been using by affiliates for a very long time to run affiliate offers. However, over time some affiliates started doing shady things with them and so many offers prohibit the use of iFrames.

However, you can still find some really good ones that allow it.

There are definitely more pros than cons when you iFrame affiliate offers. Let’s start off with the pros:

  • You can add a back button script
  • You can collect push subscribers (use this for free)
  • You can override the push subscription collection the advertiser of the offer might be using
  • You can pixel users
  • You can retarget users
  • You can track users that interact with the offer page (impossible to do when direct linking)
  • etc.

As you can see, the benefits of using an iFrame can be HUGE. Just the first 2 bullet points can add 20% – 30% more revenue to your campaigns.

There are few cons and I don’t know if I’d even call them cons, because you can easily see if there are any problems by testing the affiliate offer with a VPN.

The most common “cons” are:

  • HTTP/HTTPS mismatch between your domain and the offer page
  • The owner of the offer can break the user out of the iFrame so your scripts won’t function
  • Cross-domain resource issues
  • etc.

You see these aren’t really cons, but more tech issues can arise mostly if the owner of the offer doesn’t really want you to iFrame their offers.

Some of these issues can be solved with the sandbox attribute on the iframe HTML tag. Which options? Depends; you’ll just have to test various combinations of them to see what works for your offer.

Just make sure you test your iFrame with the offer you’re running so you don’t run into any unexpected surprises.

iFrame Landing Page Code

Not too long ago I shared a similar code on the affLIFT forumΒ and many people liked it, so I’m also going to share it here on my blog.

This landing page code is a bit special and gives you the ability to track when users interact with the offer page inside of the iframe (most people don’t even know you can do that).

To use this code you’ll want to do a few things:

  • Paste the entire code in an HTML file
  • Change the iFrame src URL to your tracker’s click URL
  • Remove the comments and console.log() statements
  • Insert any scripts you want at the end (back button, retargeting, etc.)

Here is the full iFrame Landing Page code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>iFrame Landing Page</title>
    <style>
      html{height:100%;width:100%;padding:0;margin:0}body{overflow:hidden;height:100%;width:100%;padding:0;margin:0}#container{overflow:hidden;height:100%;width:100%}iframe#frame{overflow:auto;height:100%;width:100%;display:none}.load{height:80px;text-align:center;font-size:15px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.load>div{background-color:red;height:100%;width:8px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.load .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.load .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.load .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.load .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-stretchdelay{0%,100%,40%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,100%,40%{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}
    </style>
  </head>
  <body>
    <div class="load" id="loading">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
    <div id="container">
      <iframe name="frame" id="frame" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" src="https://example.com"></iframe>
    </div>
    <script>
    document.getElementById('frame').onload = () => {
      document.getElementById('loading').style.display = 'none';
      document.getElementById('frame').style.display = 'block';
      // HERE THE IFRAME HAS FINISHED LOADING
      console.log('πŸ‘ The iFrame has finished loading!')
      window.focus();
      window.addEventListener('blur', function (e) {
        if (document.activeElement == document.getElementById('frame')) {
          // HERE THE IFRAME WINDOW WAS CLICKED
          console.log('βœ… The iFrame was clicked!')
         }
       });
      };
      // OTHER SCRIPTS CAN GO BELOW HERE
     </script>
  </body>
</html>

When this “landing page” loads it’ll show a nice loading icon until the URL within the frame finishes loading. I do this so the visitor knows something is happening just in case the offer page takes some extra time to load.

Here’s a quick demo GIF to show you how it should work:

iframe affiliate offers demo

 

After the page is finished loading you can add in some tracking scripts, replacing the πŸ‘ and βœ… log messages.

I’d suggest using custom conversions in your tracker so you can see when someone interacts with your landing page and then use that data to help with your campaign optimization.

Unfortunately, you can’t do any further tracking of the user’s interactions with the offer page due to security issues.

For our purposes tracking the user interaction should be more than enough… acting almost like a landing page, but you’re essentially direct-linking. πŸ˜‰


Leave a Reply

Your email address will not be published.