File Wrapper Creation and Integration Guide

File Wrapper is a type of advertising inventory used to monetize websites that focus on downloading content.

Data Cash supports two inventory formats:

  • File Wrapper – JavaScript that finds links on a page that lead to files for download and replaces them with sponsored links. This is what the link might look like, which will be replaced by File Wrapper:
https://cool-file.com/game.apk
  • File Wrapper Link is a type of direct link. Unlike a site with a regular direct link, File Wrapper Link supports additional parameters – file_url, file_name and file_size.

We will discuss the features of File Wrapper Link later.

File Wrapper is designed for a specific type of advertising campaign that involves installing software on the user’s device.

When a user clicks on a link that has been replaced by File Wrapper, the advertiser’s software is downloaded. Once the software is launched, the user will be prompted to download the advertiser’s product onto their device. If the user decides to install the program, they will receive a link to download the original file they intended to receive.

Ad Placement Creation

To set up an ad placement, you need to register as a publisher. You can either self-register on Affilight’s landing page or request our manager to register for you.

Once you’ve registered, click on the Create New Ad Placement button to get started.

New Ad Placement

Settings of Ad Placement

Name your ad placement, e.g. New File Wrapper.

Name of Ad Placement

Select File Wrapper as inventory type.

Inventory type

Setting IAB categories is mandatory. Choose one or more categories to which the platform belongs for precise targeting.

Website category

If unsure, select “IAB24 – Uncategorized Mix Content” or “IAB1 – Entertainment (video, music)” for broad classification. For adult content, select “IAB25-3 – Pornography, videochats, erotics” and note that only ads for adults will be shown.

Note: It is recommended to set no more than 10 categories.

Do not select additional categories if “IAB25-3 – Pornography, videochats, erotics” has been chosen.

Website IAB categories

You can also block categories of advertised offers in a similar way to how you set the website IAB categories.

Set Up a List of Priority Offers

Choose specific offers to prioritize promotion on the platform. When traffic is launched, it will go first to campaigns marked with these tags.

If the Auto mode is specified, the priority by offer type is not set.

Priority offers

Customize promo

The inventory modifies all <a> tags whose href attribute contains a URL ending with a file extension. However, the default behavior of the inventory can be altered using data-* attributes.

The attribute data-file-link="URL" allows setting a link to the file. The value of this attribute will be included in the sponsored link and will replace the original value of the href attribute. If the wrapping process fails, the original href will remain unchanged. If data-file-link="URL" is not specified, the value of href will be used instead.

The attribute data-file-name="name" sets the name of the file. If this attribute is not specified, the filename will be extracted from the URL.

The attribute data-file-size="1024" sets the file size. If this attribute is not specified, the size will be randomly generated. The size is indicated in bytes.

To restrict the script to specific page blocks, you need to specify block CSS selectors. By default, body selector is used.

Specify HTML elements

To get a better understanding of how selectors work, you can use the W3schools online editor and try to replicate the process for a saved site.

Let’s take an HTML code as an example:

<!DOCTYPE html>
<html>
<body>

<!--- Replace this File Wrapper JS with yours--->
<script src="//example.com/v2/loader.js?_t=53437" data-ts="1603116908" data-token="d561f8c7de934ae30c1e4b39ff1f123ac238a5c1" data-am="true" data-promo-cdn="mediaappletree.com"></script>
<!--- End of File Wrapper JS --->

<h1 class="heading">This link <a href="https://some-apk.com/download.apk">will not be affected</a></h1>

<p class="main">The second link <a href="https://some-apk.com/download.apk">will not be affected</a></p>

<p class="links">This <a href="https://some-apk.com/download.apk">link will be changed</a></p> 

</body>
</html>

In this code, each line contains a link for downloading a file. Suppose we want the script to replace links only in the last block of the page:

<p class="links">This <a href="https://some-apk.com/download.apk">link will be changed</a></p> 

To achieve this, we will enter the class name links in the field for HTML elements.

Optionally, one or more elements can be specified separated by commas. For example: .links, h1, h2, #id. Note that .links is a class, while h1, h2, and #id are elements.

Note: The class name must always be preceded by a .. The principles of CSS selectors are described here.

File Wrapper allows you to limit the number of links processed on a page. By default, the script replaces the first 20 links, which is the maximum allowed value. However, you can reduce this number if necessary.

Maximum number of links to be processed

Let’s use HTML code as an example to demonstrate how to change the number of processed links:

<!DOCTYPE html>
<html>
<body>

<!--- Replace this File Wrapper JS with yours--->
<script src="//example.com/v2/loader.js?_t=53437" data-ts="1603116908" data-token="d345f8c7de934ae30c1e4b39ff1f123ac238a5c1" data-am="true" data-promo-cdn="example.com"></script>
<!--- End of File Wrapper JS --->

<h1 class="heading">This link <a href="https://some-apk.com/download.apk">will not be affected</a></h1>

<p class="main">The second link <a href="https://some-apk.com/download.apk">will not be affected</a></p>

<p class="links">This <a href="https://some-apk.com/download.apk">link will be changed</a></p> 

<!-- New lines -->
<p class="links">This <a href="https://some-apk.com/download.apk">link will be changed</a></p> 

<p class="links">This <a href="https://some-apk.com/download.apk">link will not be changed</a>. It is out of range!</p> 
<!-- End of new lines -->

</body>
</html>

To begin, set the limit to two links in the corresponding field of the existing platform and save the changes.

Then, let’s take the code to the W3schools online editor and observe the result. The last link will remain unchanged since it is not included in the set limit.

Note: It’s important to keep in mind that when using CSS selectors with limits, the limits are processed sequentially.

Now, let’s add a second class to the selectors field.

And change the test code:

<!DOCTYPE html>
<html>
<body>

<!--- Replace this File Wrapper JS with yours--->
<script src="//example.com/v2/loader.js?_t=53437" data-ts="1603116908" data-token="d345f8c7de934ae30c1e4b39ff1f123ac238a5c1" data-am="true" data-promo-cdn="example.com"></script>
<!--- End of File Wrapper JS --->

<h1 class="heading">This link <a href="https://some-apk.com/download.apk">will not be affected</a></h1>

<p class="main">The second link <a href="https://some-apk.com/download.apk">will not be affected</a></p>

<p class="links">This <a href="https://some-apk.com/download.apk">link will be changed</a> // Step 1. Replaced links 1 out of 2.</p> 

<!-- New lines -->
<p class="extra-link">This <a href="https://some-apk.com/download.apk">link will not be changed!!!</a> // Step 3. Out of range.</p>

<p class="links">This <a href="https://some-apk.com/download.apk">link will be changed</a> // Step 2. Replaced links 2 out of 2.</p> 
<!-- End of new lines -->

</body>
</html>

Despite adding the extra-link class to the File Wrapper settings, the link in the corresponding block has not changed.

Initially, the script reads the setting of the CSS selectors .links, .extra-link. Then, the script takes the first element of .links. The script sequentially accepts links that match the given rule and checks the limit on the number of replacements.

Therefore, the line in the code <p class="extra-link">This <a href="https://some-apk.com/download.apk">link will not be changed!!!</a></p> won’t be processed even though it’s second in place at the top of the page.

In the “File extension” field, you can specify which files the script should process. For example, if the script is configured to only process links to files with the apk extension, all other links will be ignored. By default, all extensions except php and html are processed.

File extensions

If we add a line to the test code, the link won’t be replaced:

<p class="links">This <a href="https://some-apk.com/download.zip">link will not be changed</a></p>

Integration

Postback URL is used in “advanced” setup, most publishers don’t need to set postback. If you work on CPA basis we can pass conversion data via Postback URL. Each conversion is sent as a separate request.

Trafficback URL is important for setting the traffic type.

Later we will tell you more about setting up Postback URL and Trafficback URL.

When all information is inputted, click Next.

Integration

Connecting the Finished Script

The File Wrapper must be added to a website. Head to the Connection section and copy the link of script.

A more complex configuration can be achieved using the script code.

Section Connection

Adding script to HTML code

Open a text editor and an HTML template from W3Schools. Navigate to the page and locate the opening tag <body>.

Adding script to HTML code

Press Enter and insert the code on the next line.

Adding script to HTML code

Press the Run button, click on any section of the screen where the demo page is displayed to see the advertisement in a new tab.

Note: You can insert the script link anywhere on the page, but it is recommended to place it close to the beginning of the code, either before the closing tag </head> or immediately after the opening tag <body>.

If the platform is newly created, the script may not function correctly on the page initially. It takes some time to activate a new platform.Please wait for 10-15 minutes and then check again.

Adding script to HTML code

Adding script via CMS Blogger

To integrate File Wrapper with the CMS Blogger, you need to modify the installed theme, similar to adding a script to HTML code.

Log in to your Blogger account and go to the Theme section.

Adding script via CMS Blogger

Click the Edit HTML button.

Adding script via CMS Blogger

Locate the closing tag </head>.

Adding script via CMS Blogger

Simply insert the script link on the line before the closing tag </head>.

Adding script via CMS Blogger

Save the theme and the script will become operational. When you click on any area of the page, an ad will open.

Note: Please keep in mind that if you update or switch your Blogger theme, the script may stop working, and you will need to add the script again.

Adding script via CMS WordPress

If you’re using CMS WordPress, there are two ways to add the script link: modify your site’s theme or use a dedicated plugin. The easiest and most direct option is to use a plugin, which we’ll discuss below.

To begin, access the admin panel of your WordPress site and click on the Plugins tab. Select Add New.

WordPress website: Adding a script

Search for the plugin “Insert Headers and Footers“. Click on Install now.

WordPress website: Adding a script

Activate the plugin.

WordPress website: Adding a script

Next, go to Settings and select Insert Headers and Footers.

WordPress website: Adding a script

Insert the script link into the Scripts in Header field and click Save. The script will be added to the page.

Note: Other plugins are available for ad placement, such as “Ad Inserter – Ad Manager & AdSense Ads“. This plugin allows you to create a list of pages for script integration.

Testing JS on a test resource

In order to test the advertising platform, we will use a sample page and demonstrate how to check the script code using Google Chrome as an example. For Firefox, the process will be similar.

Note: certain plugins might interfere with the script and cause it to malfunction. We suggest disabling all extensions or creating a new browser profile for testing purposes.

Navigate to the W3Schools website’s test page and press CTRL + SHIFT + I to open the browser console. Then, go to the Console tab.

Testing JS

Copy the script code from the Connection section.

Connection section

Paste it into an empty window in the Console tab. Press Enter.

Testing JS

If everything is working correctly, the message “True” will appear, and the popup will work based on your settings.

Note: if the site has been recently created, the script may not function correctly immediately. It’s recommended to wait for 10-15 minutes and try again.

Summarize:

  1. File Wrapper Link is a type of advertising inventory for monetizing sites that are focused on downloading content.
  2. The values of the file_url and file_name parameters need to be encoded.
  3. To increase the conversion rate in the file_name and file_size parameters, you need to pass data about the file that the user originally wanted to download.
Scroll to Top