An Overlay is a simple pop-up that appears just as your visitor is about to leave your website. It is a tool that is used to reduce website and shopping cart abandonment. It provides an effective new opportunity to re-engage with the visitors and catch their attention before they leave your website.

By showing a compelling motivating message, abandoning visitors can be persuaded to return to your site and make a purchase. The effectiveness of this technology lies in visitor psychology and pre-established knowledge of visitor behavior.

The benefits of the Overlay technology can be felt nearly immediately. Your site will experience a higher conversion rate, lower bounce rate, increased sales, and higher average cart sizes. Newsletter bases grow more rapidly when spurred by the Overlay technology!

Here’s How Overlays Work

Track visitor behavior	Detect Intention to Leave	Display Targeted Offer
When a visitor lands on your website, MaxTraffic begins tracking that visitor's mouse movement, velocity, and other behaviors.	Our visitor behavior knowledge algorithm together with the Overlay technology allows MaxTraffic to determine the exact moment when a visitor is about to leave your site	Once the intention to leave has been detected, MaxTraffic displays a targeted offer to your visitor. This gives you the ability to either capture a new lead or gain a sale.

Are there any conditions for the Overlays to be triggered?

Overlays are triggered, when there is a clear movement towards the upper side of the browser AND the cursor movement has a sufficient amount of length to it. 

• An overlay is not triggered, when there are several tabs opened (only on the last opened tab of website)
• An overlay is not triggered if there have been very few mouse movements on the website (for example, user moved mouse from address bar to the top of website and back)
• Depending on the Overlay campaign targeting settings, Overlay might not be shown to a visitor if he does not meet the targeting criteria (for example, he does not match GEO, URL or any other targeting settings)

Promo bars have many uses: the bar can say hello and welcome your visitor, guide them to your current best deals, or notify them about important information.

Provide discount coupons

Promote special deals

Provide important information

Gather leads

Grow your newsletter

This has no effect on website using these scripts, it is just a simple way to block bot access. 

How does it look like in Google Search Console?

If you check any website in Google Search Console to verify if it is mobile friendly, Google will also provide info about resources that are blocking themselves from search bots. In example below you can see test results from elcorteingles.es  - and among blocked scripts there is googleadservices.com as well:

1. Tracking code: it allows us to track your visitor behavior and show them messages. Place our Tracking code across all pages of your website.

2. Conversion code: this script allows us to track conversions. Place our Conversion code on the "Thank you" page where the visitor will be taken after successfully completing a purchase.

We suggest placing these codes before the closing </body> tag.

You can also use Google Tag Manager.

Where do I get the MaxTraffic tracking and conversion codes?

1. Login into your account in e.maxtraffic.com using the email and password that was sent to your email.

2. Go to Settings > Websites

3. Click on "Get Instructions" button 

4. Now you will see the tracking code that you can send to the person, who is responsible for adding it into the website.

5. For Push Notifications you will have to download a file by pressing on "Download File" button

6. At the step 3 "Install Conversion Code" to get the code for Thank you page as well:

How to pass the conversion ID and conversion amount data to MaxTraffic?

Place our Conversion code on the page that the visitors will be directed to, once they have successfully completed the action that you intended them to complete. Usually, this is a "Thank you" page after completed purchase.

Notice that this script has two variables that you should pass to MaxTraffic.
In "conversion_id" pass unique ID. Usually, this is the order or purchase ID.
In "conversion_amount" pass the total value of conversion without any currency symbols.

Do I need to place these codes if I am using a Shopify, Magento or Wordpress plugin?

Shopify: In case you are using our Shopify app, the scripts are automatically implemented.

Magento: Plugin for Magento also does this automatically.

Wordpress: Our Wordpress plugin automatically implements Tracking code (but not Conversion code), so you need to add conversion code manually.

 1.Select the API Keys option from the settings menu in the upper right-hand corner (accessed by clicking on cog icon). This will open the API Keys Window.

The table displays any API keys that you have currently enabled.

2. If you don't have any enabled key, add a new one:

• Add a key—to add a key, click the Add a Key Icon. This will generate a new key that will appear in the API keys table. 

2. Save your Mailigen API key in Integration settings

Go to Settings > Integrations in MaxTraffic platform and select Mailigen 
Paste your Mailigen API key and click "Save".

3. Overlays - choose Mailigen campaign

After you will have saved Mailigen API key in Website settings, you will be able to select any Mailigen mailing list, when adding an Overlay campaign:

4. Promo bars - choose Mailigen campaign

After you will have saved Mailigen API key in Website settings, you will be able to select any Mailigen mailing list, when adding a Promo Bar subscribe campaign.
You can select mailing list in step 1 in Customize Subscribe Settings box.

1. Tracking code: it allows us to track your visitor behavior and show them messages. Place our Tracking code across all pages of your website.

2. Conversion code: this script allows us to track conversions. Place our Conversion code on the "Thank you" page where the visitor will be taken after successfully completing a purchase.

3. SPA specific code: this code is used only for websites using SPA technology. You need to execute it each time a visitor clicks on a link inside your single-page application. 

Where do I get the MaxTraffic tracking and conversion codes?

1. Login into your account in e.maxtraffic.com using the email and password that was sent to your email.

2. Go to Settings > Websites

3. Click on "Get Instructions" button 

4. Now you will see the tracking code that you can send to the person, who is responsible for adding it into the website.

5. For Push Notifications you will have to download a file by pressing on "Download File" button

6. At the step 3 "Install Conversion Code" to get the code for Thank you page as well:

How to pass the conversion ID and conversion amount data to MaxTraffic?

Place our Conversion code on the page that the visitors will be directed to, once they have successfully completed the action that you intended them to complete. Usually, this is a "Thank you" page after completed purchase.

Notice that this script has two variables that you should pass to MaxTraffic.
In "conversion_id" pass unique ID. Usually, this is the order or purchase ID.
In "conversion_amount" pass the total value of conversion without any currency symbols.

How to simulate a pageview in SPA (single-page application)? 

If your website is based on SPA (single-page application) you also need to execute an additional JavaScript code each time a visitor clicks a link in your application:

<script>
mt('pageview');
</script>

This code will let MaxTraffic platform know that a new pageview just happened, and you will be able to properly use URL targeting and other MaxTraffic features. 

For each visitor you can manually set his language setting by customizing MaxTraffic tracking code. For example - if a visitor is viewing your website in Estonian language, you can set "Estonian" as his language, and later - if you send a Web Push notification to your subscribers and also add an Estonian translation - then this specific visitor will receive the Estonian version of your message.

1. Get the language code

To get started, please check https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes - you must use the language code from column "639-1" for the language you want to set.

For example:

• lv if visitor is using websites version in Latvian language
• et if visitor is using websites version in Estonian language 
• en if visitor is using websites version in English language 

2. Update tracking code

The standard tracking code looks like this (where 123 is your website ID):

<script>
window.mt=window.mt||function(){(mt.q=mt.q||[]).push(arguments)};mt.l=+new Date;
mt('create', 123);
</script>
<script async src="//cdn.mxapis.com/mt.js"></script>

If your website visitor is using Estonian version, you can update his language setting with this code:

<script>
//set language setting to Estonian
mt("setLanguage", "et");
</script>

Language customization code has to be executed after the main tracking code, so both codes combined will look like this:

<script>
window.mt=window.mt||function(){(mt.q=mt.q||[]).push(arguments)};mt.l=+new Date;
mt('create', 123);
</script>
<script async src="//cdn.mxapis.com/mt.js"></script>

<script>
//set language setting to Estonian
mt("setLanguage", "et");
</script>

This language customization code can be executed in each pageview and if visitor switches between several languages (for example, from English to Estonian, then to German, then to Spanish, etc), then our system will save the last language used for that specific visitor.

And when you send a Push Notification - if you have added a translation for the language that was set to this specific visitor, then he will receive his language version of message, if not - then he will receive the default message.

3. Send the same message in several languages at once

When you are sending a new notification, you can click "Add Language" button:

Then select to which languages you want to translate it, for example - lets add Russian language:

And then you can translate the message in Russian language as well:

And when the message is sent - then for those subscribers, whose language setting will be set as "ru" (Russian), they will receive the Russian version of this message, but all other subscriber will receive the default version of your message.

Of course - if you have more than 2 languages in your website, then you can translate your message to as many languages as you like, just add more of them when you click "Add language". 

Why translate messages, if you can create visitor segments by country?

Some of our clients are using custom segments that are based on visitors country. Of course, that can also be a way how to group subscribers and send them specific messages, but in our opinion there are several advantages of translating messages:

1. For each language you can not only translate the content, but also set custom links and UTM tags. That way, for example, you can send the Russian speaking visitor directly to the Russian version of your website.
2. You don't have to create many segments based on visitor's country and send many messages one after another. The same message can be sent only once and with as many translations as you wish.
3. If you customize the tracking code and set the language setting for your subscribers - that will work more precise than grouping them by countries, because in 1 country many languages can be used, and there can be cases where an Estonian lives in Germany, etc. 

To do that, you need to use following JavaScript code. This example assumes that you are using Google Tag Manager and have created a user_id variable that contains your system's user ID.

<script>
//get user id
var mt_user_id = parseInt({{user_id}}) || null;

if(mt_user_id) {
    //save user id
    mt('set', 'userId', mt_user_id);
}
</script>

We recommend to add this code at the end of MaxTraffic tracking code. The default tracking code looks like this:

<script>
  window.mt=window.mt||function(){(mt.q=mt.q||[]).push(arguments)};mt.l=+new Date;
  mt('create', 12345);
</script>
<script async src="//cdn.mxapis.com/mt.js"></script>

If you add the part about saving user ID, then everything together should look similar to this example:

<script>
window.mt=window.mt||function(){(mt.q=mt.q||[]).push(arguments)};mt.l=+new Date;
  mt('create', 12345);
</script>
<script async src="//cdn.mxapis.com/mt.js"></script>

<script>
//get user id
var mt_user_id = parseInt({{user_id}}) || null;

if(mt_user_id) {
  //save user id
  mt('set', 'userId', mt_user_id);
}
</script>

Important:

• Replace 12345 with your website ID
• Replace {{user_id}} with the GTM variable you use for user ID

With a tiny JavaScript snippet, you can give us the information about your visitor, for example:
- Visitor has products in his shopping cart
- Cart total amount is below 50€ (maybe you have a free shipping for larger orders)
- Visitor has logged in
- Visitor is a female / male
- Visitor has not signed up for your newsletter
- Visitor is in a specific application step

You can define segments with this small piece of JavaScript code that should be placed right before loading the MaxTraffic tracking script.

You can define one segment:

<script>
mt('segments', ['signup step1']);
</script>

Or also several segments at once, if needed:

<script>
mt('segments', ['signup step 1', 'application form']);
</script>

All the segmentation code together with the tracking code should look like this (note that in 1234 you should use your own website ID):

<script>
window.mt=window.mt||function(){(mt.q=mt.q||[]).push(arguments)};mt.l=+new Date;
//define segments
mt('segments', ['signup step 1', 'application form']);
//load tracking script
mt('create', 1234);
</script>
<script async src='//cdn.mxapis.com/mt.js'></script>

As a result of giving this information to our platform, you will see new additional targeting options on the third step of campaign creation process.

Important: these segments will be available only in current page. When visitor moves to a different page, if this next page has no segments defined - then the previous applied segment will no longer be available.

If you want to have a segment that is active on all website (in all pages), make sure - that this custom segment code is used also in all pages.

2. Download mobile app

3. Offer help

4. Show promotions

5. Show Top products

Then click on Get Instructions

1. Install Tracking Code

Make sure that MaxTraffic tracking code is placed in all pages:

2. Upload Web Push File

Then click on "Upload Web Push File" and download sw-mt.js file: it needs to be placed on your website root folder. If you have copied the file to root folder, then you should be able to access the sw-mt.js file by opening https://www.website.com/sw-mt.js (just replace website.com with your own domain).

3. Verify you have an active Push Prompt

Go to Web Push > Prompts, and make sure that you have at least one Prompt added and with status "Active". If you don't see any prompts, click on "Add prompt" to add one. 

 

 

4. Check if your site has HTTPS?

Native Push notifications will work only if your website by default is using HTTPS connection. If you enter website.com in browser, it should redirect to the HTTPS version of your site, so that URL starts with: https://

 

 

If your website does not have HTTPS, please contact your IT team and ask them to enable it. These links might help:

• www.howto-expert.com/how-to-get-https-setting-up-ssl-on-your-website/ 
• support.google.com/webmasters/answer/6073543?hl=en

Any questions?

Write to kristaps@maxtraffic.com, Skype: kristaps_mors

<script>
    document.addEventListener("afterShow", function() {
        maxtAd.setCookie('mt_subscribed', '1');
    });
</script>

From this example:

mt_subscribed = cookie name, can change according to your needs

1 = cookie value

By using this code all visitors who will fill out the banner and get to 2nd step, will get a cookie.

Later you can use this cookie to target (or exclude) these visitors from other campaigns.

With a tiny JavaScript snippet, you can give us the information about your visitor, for example:
- Visitor has products in his shopping cart
- Cart total amount is below 50€ (maybe you have a free shipping for larger orders)
- Visitor has logged in
- Visitor is a female / male
- Visitor has not signed up for your newsletter
- Visitor is in a specific application step

You can define one segment:

<script>
//define segments
mt('segments', ['signup step1']);

//execute pageview event (must have for SPA page)
mt('pageview');
</script>

Or also several segments at once, if needed:

<script>
//define segments
mt('segments', ['application form', 'signup step2']);

//execute pageview event (must have for SPA page)
mt('pageview');
</script>

As a result of giving this information to our platform, you will see new additional targeting options on the third step of campaign creation process.

Important: these segments will be available only in current page. When visitor moves to a different page, if this next page has no segments defined - then the previous applied segment will no longer be available.

If you want to have a segment that is active on all website (in all pages), make sure - that this custom segment code is used also in all pages.

How to simulate a pageview in SPA (single-page application)? 

If your website is based on SPA (single-page application), then remember - even if in a specific page you don't have any segments defined, you would still need to execute following code each time a visitor clicks a link in your application:

<script>
mt('pageview');
</script>

This code will let MaxTraffic platform know that a new pageview just happened, and you will be able to properly use URL targeting and other MaxTraffic features. 

Available information includes stats, graph, campaign targeting settings and linked ads.

Pressing "Targeting" button will open campaign targeting settings.

If you want to set up an integration with your MailChimp account, chances are high that you'll need to generate an API key. Users with Manager permissions can generate and view their own API keys. Users with Admin permissions can also see API keys for other account users. Below, you'll learn how to grab an existing API key or generate a new one.

 

1. Click your profile name to expand the Account Panel, and choose Account.
2. Click the Extras drop-down menu and choose API keys.
3. Copy an existing API key or click the Create A Key button.
4. Label your key descriptively, so you know what application uses that key.

More info here: http://kb.mailchimp.com/accounts/management/about-api-keys#Find-or-Generate-Your-API-Key

2. Save your Mailchimp API key in Integration settings

Go to Settings > Integrations in MaxTraffic platform and select mailchimp
Paste your Mailchimp API key and click "Save".

3. Overlays - choose Mailchimp campaign

After you will have saved Mailchimp API key in Website settings, you will be able to select any Mailchimp mailing list, when adding an Overlay campaign:

4. Promo bars - choose Mailchimp campaign

After you will have saved Mailchimp API key in Website settings, you will be able to select any Mailchimp mailing list, when adding a Promo Bar subscribe campaign.

You can select mailing list in step 1 in Customize Subscribe Settings box

Available information includes stats, graph, campaign targeting settings and linked ads.

Pressing "Targeting" button will open campaign targeting information.

There are 2 type of Sequence (Drip) campaigns:

1. Sequence campaign that starts with a Subscribe event (when website visitor clicks "allow" and gives his permission to receive Web Push Notifications)

2. Sequence campaign that starts with a Custom event - this type of campaign is activated by executing a small JavaScript code, and can be used in different kind of use cases. Couple of examples:

• Campaign that starts after an application form is finished
• Campaign that starts after a purchase is done
• Campaign that starts after visiting a specific category or page
• Campaign that starts after user shows some kind of engagement (starts an application form, opens contact page, visits product page, spends X amount of time in website, etc.)

For more details see following links:

• Web Push Sequence campaigns: Subscribe event
• Web Push Sequence campaigns: Custom event

You can forget about all the fuss with installing codes, because all you have to do is push one button. Thats it! All the codes will be implemented automatically and you will be ready to create your first campaign with MaxTraffic.

You can install MaxTraffic plugin for Shopify here - https://apps.shopify.com/maxtraffic-eu

1.1. Offer a discount code when visitor is about to leave:

1.2. Offer a discount code for free shipping:

1.3. Show a limited time discount:

1.4. Remind about return policy:

2. Newsletter

2.1. Offer a coupon code for subscribing to newsletter:

2.2. Ask to subscribe to latest news:

3. Frontpage, categories or products

3.1. Show the top promotions & discounts:

3.2. Show the most popular products:

3.3. Offer a discount for first purchase:

 4. Registration Form

4.1. If it is possible to purchase products without signing up, remind about that: