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. 

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

To use this feature, you need to modify MaxTraffic tracking code. By default it looks like this:

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

If you want to add or remove tags, please use addTag or RemoveTag functions:

<script>
  mt('addTag', 'one_tag');                                                                             
  mt('addTag', 'second tag');                                                                                      
  mt('addTag', 'thirdtag');                                                                           
  mt('removeTag', 'oldtag');
</script>

Correct use of addTag, removeTag

addTag/removeTag can be called once or many times, only new unique tags will be added.

Tags are case insensitive, example: "Super User" is transformed to "super user"

Tag max length is 36 chars. If tag length exceeds 36 chars, chars after 36 will be ignored, whitespaces counts as char.
example: "very long tag with more than thirty six characters" will be transformed to "very long tag with more than thirty"

Tag can contain whitespaces, but surrounding whitespace will be ingored. Example: " tag with whitespaces " is transformed to "tag with whitespaces"

Example - creating tag for visitors, who have logged in

If you want to tag visitors who have logged in at least once, then:

For visitors who have not logged in execute this tracking code version:

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

For visitors who have logged in, use this code:

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

Note: remember to replace WEBSITE_ID with your own website ID. 

Sending notifications 

After tag integration is done, when sending a new Push Notification, you will be able to include or exclude specific tags in Targeting section:

Define user traits (custom fields) 

1. In e.maxtraffic.com go to Settings > Website Settings > Trait mappings

2. Click on "Define new trait" button to add new user trait (custom field)

3. Fill out details about each user trait (custom field) that you want to use:

IMPORTANT: make sure to use correct data type and name field - after you have saved trait, later it will not be possible to make changes to data type or name field. 

4. Click Save

Pass trait info (custom fields) to our tracking code 

For our platform to receive data from your system, you will need to modify MaxTraffic tracking code. By default it looks like this:

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

If you want to pass trait info (custom fields) to our platform and later use it in segments, then you need to add Javascript snippet for each trait you want to use. For example, if you want to pass email data to our platform, then you need to add following code:

<script>
  mt('traits', {
    'email': 'peter@initech.com'
  })
</script>

Note: replace peter@initech.com with actual email address of your client

So final code would look like this:

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

//Set trait, pass data about client email
<script>
  mt('traits', {
    'email': 'peter@initech.com'
  })
</script>

Note: replace peter@initech.com with actual email address of your client

IMPORTANT: if you use Google Tag Manager or similar tool, make sure that both codes (tracking code and trait code) are loaded together as one tag OR set trait code is loaded only after tracking code is initialized.

Example 1: counting number of times, when user has logged in

If you would like to create a trait that shows, how many times a client has logged in, you could do it in following way:

1. Go to Settings > Website Settings > Trait mappings, click "Define new trait"

2. Decide about the Trait name, in this example we will call it "logins":

3. After a login event occurs in your website, trigger following code:

<script>
// Increment field value by 1
mt(function(sdk) {
    var name = "logins"; // Trait name
    var value = 1; // Increment amount
    var traits = {};
    traits[name] = (sdk.visitor.traits[name] || 0) + value;
    mt("traits", traits);
});
</script>

Example 2: adding new values to Array

If you have a trait that uses "Array" as data type, and in some situation you want to add new values instead of replacing them, then you can use following code:

<script>
mt(function(sdk) {
    var name = "topics"; // Set trait name
    var values = ["topic1"]; // Set new values to append
    var traits = {};
    traits[name] = (sdk.visitor.traits[name] || [])
        .concat(values)
        .filter(function(v, i, a) { return a.indexOf(v) === i });
    mt("traits", traits);
});
</script>

Example 3: setting multiple traits with one request

If you would like to save more detailed info about orders and later segment subscribers based on this data, you could create following traits:

• All Orders Value
• Average Order Value
• Last Order Date
• Last Order Value
• Order Count

And it would look like this:

And then - after purchase is made, in "Thank You" page (conversion page) execute following code.

Note: replace {{TotalSum}} with your own variable that contains the order value.

<script>
mt(function(sdk) {
    var orderValue = parseFloat('{{TotalSum}}');
    var lastOrderDate = (new Date()).toISOString();
    var orderCount = (sdk.visitor.traits.order_count || 0) + 1;
    var allOrdersValue = (sdk.visitor.traits.all_orders_value || 0) + orderValue;
    var averageOrderValue = (allOrdersValue / orderCount);
    mt("traits", {
        last_order_value: orderValue,
        last_order_date: lastOrderDate,    
        order_count: orderCount,
        all_orders_value: allOrdersValue,
        average_order_value: averageOrderValue,
    });
});
</script>

https://www.website.com/sw-mt.js

How to place push file in custom folder?

For example, if you would like to place file in https://www.website.com/media/ folder or any different subfolder that is possible as well. In this case then you need to follow these instructions:

1. Upload file to server.

https://www.website.com/media/sw-mt.js

2. Update the MaxTraffic tracking code.

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

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

3. Add custom header

1. Website name

Website name will be shown to visitor in the Prompt that asks for permission:

2. Website logo

For Safari users you need to prepare website logo in 256x256px size. Image format should be PNG - it can be transparent as well.

How will Web Push notification look like on Safari?

Example of Safari message:

If your website ID is 1234, then by default MaxTraffic tracking code will look like this:

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

To use API, you need to customize the MaxTraffic tracking code by setting userId parameter:

mt('set', 'userId', '123456789');

So if your website visitor is logged in and you know his userId, then tracking code will look like this:

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

Don't forget to replace 1234 with your website ID, and 123456789 with userId.

Note: if you don't know the userId (for example, user is not logged in), then use the default tracking code version (without setting the userId parameter).

2. Get your API key

You can get your API key in Settings > Website Settings > Web Push > API:

3. Use REST API

Check out documentation here: dev.maxtraffic.com

Right now API has following features:

• check if a specific user has subscribed to notifications 
• send personalised notification to 1 or more users by specifying their userID's.
• get info about visitor traits 
• add/update info about visitor traits 

If something is not clear, please write to support@maxtraffic.com 

To get started, you need to modify MaxTraffic tracking script:

1. Passing userId to MaxTraffic

By default your tracking script will look like this (we use 999 as your website ID in this example):

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

If a visitor has not logged in your system, then you need to keep the same tracking code as above.

BUT - if a visitor has logged in your system, and you know his unique user ID, then you need to add additional line to tracking script, sending us info about his userId (in this example userId is 123456789):

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

Note: make sure that instead of 999 you are using your own website ID in the tracking script.

2. Get your API key

To use API, you first need to get your API key in e.maxtraffic.com > Push Notifications > Settings > API.

3. Checking if user has subscribed to notifications

After you have done modifications to tracking script, you can send server-side requests to our REST API and get info about any user to see if he has subscribed to Web Push Notifications or not. 

To get this info, see documentation here: http://dev.maxtraffic.com/#operation/getVisitorById

4. Special offers

Now that you know who has subscribed, you can save this info in your own user database and depending on status - either offer user some special promotions or bonuses, or inform him - that he needs to subscribe to notifications to receive them.

When a visitor adds a product to shopping cart, you need to save MaxTraffic Visitor ID, product ID and date in your own database. You can create a table shopping_cart_tmp with 3 columns: MtVisitorId, ProductId, date

To get MaxTraffic Visitor ID, use following script:

<script type="text/javascript">
mt(function(mtsdk) {
  // Get push notification permission status
  // "unsupported" push notifications not supported
  // "default" visitor is ready to receive permission request to allow/block push
  // "granted" visitor has allowed push notifications
  // "denied" visitor has blocked push notifications
  if(mtsdk.pushNotificationPermission == "granted") {
    //visitor has granted permission to receive push notifications

    //get visitors ID
    console.log(mtsdk.visitorId);

  }
});
</script>

So when someone adds a product to cart, you need to execute script similar to this one:

<script type="text/javascript">
mt(function(mtsdk) {
  if(mtsdk.pushNotificationPermission == "granted") {
    //get Maxtraffic Visitor ID
    MtVisitorId = mtsdk.visitorId;

    //get product id
    ProductId = ...

    //add info to DB
    ...

  }
});
</script>

2. Delete info from DB, if product is removed from cart

If visitor removes any product from his shopping cart, you also need to delete it from shopping_cart_tmp table.

3. Delete info from DB, if purchase is completed

If visitor completes the purchase, then also delete all rows from shopping_cart_tmp table that are related to the specific visitor.

4. Create a Cron task to send Cart Abandonment notifications

Create a cron task that executes once per minute and checks - if there are any users who have not finished purchases and date is older than 1 hour:

SELECT DISTINCT(MtVisitorId) FROM shopping_cart_tmp
WHERE DATE_ADD(date, INTERVAL 1 HOUR) < NOW()

Then use MaxTraffic's REST API to send out a Push Notification to them. More info how to send a message with our REST API, is available here: dev.maxtraffic.com/#operation/addNotification

To send notification using MaxTraffic user ID (mtsdk.visitorId), you need to use parameter to_uids

And after you have sent the notifications, delete all the rows you just selected (so you don't send notifications to the same visitors again next time the cron task is executed):

DELETE FROM shopping_cart_tmp
WHERE DATE_ADD(date, INTERVAL 1 HOUR) < NOW()

1. Check if browser supports Web Push?

You need to verify if visitor's browser supports Web Push Notifications. If it does not, then you can ask him to use a different browser (Chrome or Firefox, for example), or just hide this feature. To check it, you can use our library: 

<script type="text/javascript">
mt(function(mtsdk) {
  // Get push notification permission status
  // "unsupported" push notifications not supported
  // "default" visitor is ready to receive permission request to allow/block push 
  // "granted" visitor has allowed push notifications
  // "denied" visitor has blocked push notifications
  if(mtsdk.pushNotificationPermission == "unsupported") {
    //visitor is using browser that does not support browser notifications
    //we recommend to either disable feature or ask them to use a different browser
  }
});
</script>

2. Get visitors ID

To subscribe visitor to your product updates, you first need to get his unique ID from MaxTraffic's API. 

<script type="text/javascript">
mt(function(mtsdk) {
  // Get visitor unique Id
  // To test it, display it in Console
  console.log(mtsdk.visitorId);
});
</script>  

3. Check if visitor has granted permission to receive browser push notifications

<script type="text/javascript">
mt(function(mtsdk) {
  // Get push notification permission status
  // "unsupported" push notifications not supported
  // "default" visitor is ready to receive permission request to allow/block push
  // "granted" visitor has allowed push notifications
  // "denied" visitor has blocked push notifications
  if(mtsdk.pushNotificationPermission == "granted") {
    //visitor has granted permission to receive push notifications
  }
});
</script>

3.1. If user has denied permission to receive web push notifications

Show him instruction how to grant permission for your site:

<script type="text/javascript">
mt(function(mtsdk) {
  // Get push notification permission status
  // "unsupported" push notifications not supported
  // "default" visitor is ready to receive permission request to allow/block push
  // "granted" visitor has allowed push notifications
  // "denied" visitor has blocked push notifications
  if(mtsdk.pushNotificationPermission == "denied") {
    //visitor has denied permission to send him Push Notifications
    //show him instruction how to subscribe
    mtsdk.togglePushNotificationBlockedDialog();
  }
});
</script>

If you execute mtsdk.togglePushNotificationBlockedDialog(), it will activate this instruction on visitor's screen:

4. Check if visitor has subscribed to Product Updates

You need to check this in your own database. We would recommend to create a data table with 2 columns: user_id, product_id

If user has already subscribed to Product Updates, you can show it to him and also let him unsubscribe if he wants.

If he unsubscribes, then remove him from your data table. 

5. Subscribing visitor to Product Updates

If user wants to receive product updates, then just save his visitorId + productId in your own database.

<script type="text/javascript">
mt(function(mtsdk) {
  // Get push notification permission status
  // "unsupported" push notifications not supported
  // "default" visitor is ready to receive permission request to allow/block push
  // "granted" visitor has allowed push notifications
  // "denied" visitor has blocked push notifications
  if(mtsdk.pushNotificationPermission == "granted") {
    //visitor has granted permission to receive web push 
    //if visitor clicks on button to receive product updates
    //then add his info to your own database
  }
});
</script>

6. Get your MaxTraffic REST API key

To use REST API, you first need to get your REST API key in e.maxtraffic.com > Push Notifications > Settings > API.

7. Sending info about Product Updates

When a product that was out of stock, becomes available again, then you can do a query on your own database and select all visitors who subscribed to this specific product updates.

Then use MaxTraffic's REST API to send out a Push Notification to them. More info how to send a message with our REST API, is available here: dev.maxtraffic.com/#operation/addNotification

To send notification using MaxTraffic user ID (mtsdk.visitorId), you need to use parameter to_uids

Any user who subscribed before will be automatically resubscribed when they revisit your site with MaxTraffic installed.

How will this transition work?

1. Open website in your brower

Open the website for which you want to check the visitorId.

2. Open Console in your browser.

For Chrome it can be done by clicking View > Developer > JavaScript Console. 

3. Copy & paste code in Console

Copy the code below and paste it in Console:

mt(function(sdk) {
    console.log(sdk.visitorId)
})

It should look like this:

After you have pasted the code, press Enter

4. Get your visitorId

Your visitorId will appear and look similar to "0febcfd09bda3ca3bf3a01c207635f9b" - copy this value and provide this to MaxTraffic  team: