Free All Media Javascript SDK

• Helps you integrate FAM into your web site or web app with minimal setup.
• Event callbacks for everything you need.
• Can be included into an HTML document or imported directly via npm.
• CDN hosted and non-hosted copies available.
• Custom geo-targeting.
• Automatic detection of adblockers with user prompt.
  • Asks user to please disable their adblocker to gain access to the offer.
  • Provides animated instructions on how to disable adblocking for the offer.

Installation

CDN Hosted

You can always pull the latest version of the FAM Javascript SDK from our CDN at:

https://cdn.freeallmedia.com/sdk/js/0/latest/fam.js

HTML

<!-- Include this at the bottom of your 'body' tag -->
<script src="https://cdn.freeallmedia.com/sdk/js/0/latest/fam.js"></script>
<script type="text/javascript">
  (function (window) {
    const fam = new Fam();
  })(window);
</script>

NPM

You can install the FAM Javascript SDK from npm:

$ npm install fam-sdk --save

You can import FAM directly as a module via the import keyword:

import Fam from "fam-sdk";

const fam = new Fam()

There is a /dist/ directory for those that prefer directly including a local copy into their HTML documents:

$ npm install fam-sdk
$ ls ./node_modules/fam-sdk/dist/fam.js

Example Code

A complete example is available in the /dist/examples directory and on our CDN:

• https://cdn.freeallmedia.com/sdk/js/0/latest/examples/basic.html

Usage

fam.window(url)

1. Takes a FAM campaign URL
2. Displays the FAM campaign in a new window or tab.
3. Returns the new window object.

const famWindow = fam.window("my-campaign-name");

setTimeout(() => {
  famWindow.close();
}, 5000);

fam.iframe(domID, url)

1. Takes a domID to an element on your HTML page and a FAM campaign URL.
2. Creates an iFrame within the designated element that displays the FAM campaign.
3. Returns the iFrame's DOM element.

const iFrameElement = fam.iframe("my-campaign-name");

fam.on(eventName, eventHandler)

1. Takes an event name and event handler function.
2. Calls the event handler function each time
3. Returns the iFrame's DOM element.

fam.on("start", function () {
  console.log("FAM experience started.");
});

fam.on("end", function () {
  console.log("FAM experience ended.");
});

fam.on("close", function (activity) {
  console.log(`FAM experience closed by user while on activity named "${activity.name}"`);
});

fam.on("activity:start", function (activity) {
  console.log(`Activity named "${activity.name}" of type "${activity.type}" started.`);
});

fam.on("activity:end", function (activity, results) {
  console.log(`Activity named "${activity.name}" of type "${activity.type}" ended with the following results:`, results);
});

fam.on("image:impression", function (activity, creative) {
  console.log(`Image "${creative.name}" shown in activity "${activity.name}"`);
});

fam.on("image:clickthrough", function (activity, creative, url) {
  console.log(`Image "${creative.name}" clicked through to url "${url}" in activity "${activity.name}"`);
});

fam.on("video:play", function (activity) {
  console.log(`Video for activity "${activity.name}" playing.`);
});

fam.on("video:pause", function (activity) {
  console.log(`Video for activity "${activity.name}" paused.`);
});

fam.on("video:end", function (activity) {
  console.log(`Video for activity "${activity.name}" ended.`);
});

fam.on("video:mute", function (activity) {
  console.log(`Video for activity "${activity.name}" muted.`);
});

fam.on("video:unmute", function (activity) {
  console.log(`Video for activity "${activity.name}" un-muted.`);
});

Detect Adblocker w/ Alternate Messaging

You can automatically detect when adblockers are active and provide alternate messaging asking the user to disable it for the offer.

Note: As with all adblocker detectors, user must refresh browser in order to detect that adblocker was disabled.

fam.adblocker.active = true; // defaults to true
fam.adblocker.title = "Oops!";
fam.adblocker.subtitle = "We rely on ad support";
fam.adblocker.body = "Please turn off your adblocker, then refresh to see your content.";

Geo-Targeting

You can restrict or show content based upon the continent, country, region, and city of users.

Note: As with all adblocker detectors, user must refresh browser in order to detect that adblocker was disabled.

fam.adblocker.active = true; // defaults to true
fam.adblocker.title = "Oops!";
fam.adblocker.subtitle = "We rely on ad support";
fam.adblocker.body = "Please turn off your adblocker, then refresh to see your content.";