Template structure

File hierarchy

A template is a zip file that you will upload to FA servers through the campaign creation interface. The API will parse your package in order to validate the code and check for errors or missing file.

The following structure is the minimum required by the server, so that it can properly parse and analyze your files.

Examples

You can find all the examples mentioned in this tutorial in our public GitHub repository.

Create your own template

A minimal template

In-app templates are designed the same way you create a website, with HTML, CSS and Javascript. And like responsive websites, they can adapt their layout to the dimensions of each device, to ensure a proper display of your message.

A template is a zip file that contains a web site. The starting point is always the file index.html. Any zip file that contains an index.html file is a valid in-app template and can be sent directly with the FollowAnalytics platform.

Let's create a template.

  1. Create a new folder.

  2. Inside this folder, create an html file with the name index.html and this content:

<!DOCTYPE html>
<html>
  <body style="background: white; color: black; text-align: center;">
      My awesome InApp template!
  </body>
</html>
  1. Compress everything a zip file.

    Compressing

  2. Add the template to the library.

    Drag and Drop

  3. The template has been uploaded, you can now use it.

    Template info

This is it! Your template is ready!

Template preview

Template info

Inside the library, a template has some information in order to distinguish it from the other templates. For example, it can have a technical name, a title, an author, a version and a description.

These fields can be defined in multiple languages. The user interface of the FollowAnalytics platform will display the template info in the preferred language of the user. If a field is not defined in some language, the English translation is going to be used as a fallback.

In order to define these fields, we have to create a new file named definition.json inside the root folder of the template and add it in the zip file. Here is an example:

{
  "$schema": "https://api.follow-apps.com/json-schemas/inapp-templates/v1_0_0.json",
  "template_options": {
    "technical_name": "my_awesome_template",
    "title": {
      "en": "My awesome template",
      "fr": "Mon template magnifique"
    },
    "description": {
      "en": "A tutorial template.",
      "fr": "Un template d'apprentissage."
    },
    "version": "1.0.0",
    "author": "This is me!"
  }
}

Now, in order to publish this template, we have to add both files in one zip file.

Compressing

After uploading, we can see that the server has imported all the info defined inside the definition.json file.

Template info

The template that we have created had a white background and covered the entire screen of the devices. It's possible, however, to have templates with transparent backgrounds. This way, we can create pop-up messages.

Let's create one! This is the code for index.html.

<!DOCTYPE html>
<html>
  <body>
    <div style="margin: 30%; padding: 5%; background: pink; color: white; text-align: center; border-radius: 10px;">
      My awesome InApp template!
    </div>
  </body>
</html>

The code above leaves the background transparent and adds a pink box in the center of the screen.

Let's also modify the definition.json in order to tell that this template is a popup. We have to add the "type" of the template inside the section sdk_options:

{
  "$schema": "https://api.follow-apps.com/json-schemas/inapp-templates/v1_0_0.json",
  "template_options": {
    "technical_name": "my_awesome_template",
    "title": {
      "en": "My awesome template",
      "fr": "Mon template magnifique"
    },
    "description": {
      "en": "A tutorial template.",
      "fr": "Un template d'apprentissage."
    },
    "version": "1.0.0",
    "author": "This is me!"
  },
  "sdk_options": {
    "type": "popup"
  }
}

After compressing and uploading, here is our template:

Template preview

Interactions

Define a custom close button

The SDK inserts automatically a close button on the upper right corner of the screen. It is possible, however to use another close button. In order to do this, first we have to remove the default one. This is done inside definition.json with these instructions:

{
  "$schema": "https://api.follow-apps.com/json-schemas/inapp-templates/v1_0_0.json",
  "sdk_options": {
    "close_button": {
      "appear_timeout": "never"
    }
  }
}

Now, we have to add our own button, with HTML and Javascript.

<button onlick="myButtonClicked();">Close</button>

When the user clicks the button, we have to call the method FollowAnalytics.CurrentCampaign.close();.

<head>
  <script type="text/javascript" src="fa-sdk.js"></script>
  <script type="text/javascript">
    function myButtonClicked() {
      FollowAnalytics.CurrentCampaign.close();
    }
  </script>
</head>

The object FollowAnalytics is automatically injected inside the template's Javascript code by the SDK. It contains many useful methods. You can find a complete reference here.

You will need the file fa-sdk.js in order to test this template offline. It contains a mock implementation of the FollowAnalytics object.

Logging campaign actions

In order to collect feedback from the user interaction with the InApp Messages, we can log the users actions and link them to the current campaign. This is done with the method FollowAnalytics.CurrentCampaign.logAction('My action');

Let's say that we have two buttons in the template and we want to measure how many users have clicked on each button. This template for instance has a question and the buttons "Yes" and "No":

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="fa-sdk.js"></script>
    <script type="text/javascript">
      function onYes() {
        FollowAnalytics.CurrentCampaign.logAction("Yes");
        FollowAnalytics.CurrentCampaign.close();
      }
      function onNo() {
        FollowAnalytics.CurrentCampaign.logAction("No");
        FollowAnalytics.CurrentCampaign.close();
      }
    </script>
  </head>
  <body>
    <div style="margin: 30%; padding: 5%; background: pink; color: white; text-align: center; border-radius: 10px;">
      My awesome InApp template! Do you like it?
      <div>
        <button onclick="onYes();" style="background: green; color: white">Yes!</button>
        <button onclick="onNo();" style="background: red; color: white">No</button>
      </div>
    </div>
  </body>
</html>

The SDK will send all the campaign actions to the server. This way we can see the stats on the front-end:

Campaign action stats

Interactions with host app and other apps

You can use standard deep-link URLs in order to navigate to specific sections of your application. For instance, the link <a href="myapp://section1"> will open the "section1" of your application.

Deep-links to other apps, including system apps, can be added to HTML links directly in your template. This means that you can link to tel://+15141234567 to initiate a phone call or mailto://support@followanalytics.com to open a mail composer.

Logging custom events

The tagging plan of your application can be extented to within the template messages. You can log events or errors of your tagging plan by calling the methods logEvent and logError:

FollowAnalytics.logEvent('my-event');

You can also pass the event details:

FollowAnalytics.logEvent('page-visited', 'home-page');

or even:

FollowAnalytics.logEvent('product-purchased', { product_id: 123, color: 'blue' });

Other SDK methods

Almost every method that is available to the SDK can be called from within a template. See the complete reference

User input

Adding parameters to your template

A template with parameter

Declare the fields

{
  "inputs": {
    "text": {
      "type": "string",
      "default": "My awesome template"
    },
    "fgColor": {
      "type": "color",
      "label": {
        "en": "Text color",
        "fr": "Couleur du texte"
      },
      "default": "#ffffff"
    },
    "bgColor": {
      "type": "color",
      "label": {
        "en": "Background color",
        "fr": "Couleur du font"
      },
      "default": "#ff8888"
    }
  }
}

Read and use the field values

The values for the fields will be put inside the javascript object FollowAnalyticsParams after the user has filled in the form. This object is injected automatically inside the file fa-params.js. For offline development, you can create your own fa-params.js file were you can put test values for your parameters.

FollowAnalyticsParams = {
  text: "My awesome InApp template! Do you like it?",
  fgColor: "#ffffff",
  bgColor: "#ff8888"
};

From the HTML file, you have to reference the fa-params.js file. Then you can read all the parameters from inside the FollowAnalyticsParams object.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="fa-sdk.js"></script>
    <script type="text/javascript" src="fa-params.js"></script>
    <script type="text/javascript">
      function loadParams(){ 
        var popup = document.getElementById('popup');
        popup.style.color = FollowAnalyticsParams.fgColor;
        popup.style.backgroundColor = FollowAnalyticsParams.bgColor;
        var text = document.getElementById('text');
        text.innerText = FollowAnalyticsParams.text;
      }

      function onYes() {
        FollowAnalytics.CurrentCampaign.logAction("Yes");
        FollowAnalytics.CurrentCampaign.close();
      }

      function onNo() {
        FollowAnalytics.CurrentCampaign.logAction("No");
        FollowAnalytics.CurrentCampaign.close();
      }
    </script>
  </head>
  <body onload="loadParams();">
    <div id="popup" style="position: fixed; top: 20%; left: 20%; bottom: 20%; right: 20%; padding: 5%; text-align: center; border-radius: 10px;">
      <div id="text">
        My awesome InApp template! Do you like it?
      </div>
      <div>
        <button onclick="onYes();" style="background: green; color: white">Yes!</button>
        <button onclick="onNo();" style="background: red; color: white">No</button>
      </div>
    </div>
  </body>
</html>

More input types

The custom form supports the input types string, enum, number, boolean, color, image and video. See the complete reference

Next steps

Check our GitHub repository for more examples of templates.