Page History

...

We will explain here the fullest solution, where you also track which users do share your app, and which particular new user came from which referrer. If you need a simple share function, without tracking, you will also be told, where to stop.

Step 1 - Add a button to start share

This buttons are often denoted with something like this -   or this  

You can find a list of suitable Share buttons, which you can use is here - https://fontawesome.com/icons?d=gallery&q=share

Here is an Article on How to Add Icons to buttons.

Step 2 - Add a Custom JS Action to the button

Below is the sample code to add into the Custom JS  -

const share = function(){
navigator.share({
title: 'mobsted.com',
text: 'Check out mobsted platform',
url: 'https://mobsted.com/?utm_referal_objectid=#Object:objid#',
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
}

if (navigator.share) {

share()
} else {

alert('Sharing does not work');
}

NOTE the URL link above (line 5) - needs to lead to the place in your app, where you want to land all the new users. It can be a certain screen in your app, or a Common Access Link from the Security section of the app, or a screen in a landing-page kind of app, so not the same one from where sharing is made. All depends on the task at hand.

An example of such URL could be - https://a15ef654.mobsted.com/pwa/?appid=17

Title and text (lines 3 & 4)  - what the native sharing function of a user's device will show during the process.

...

It is done using UTM marks, so note the following in the code above (line 5 again ↑):

"?" denotes start of the URM mark

"utm_referal_objectid"  is just a name you give this UTM mark, any name here will do, as long as it has no spaces

#Object:objid# is a hashtag to get the right column from Objects. But you can use anything, like a phone number, or email or object's UUID good option - #Object:uuid# (which is better in our opinions, as it is randomthe random hash).

...

Step 3 - Recording Referrers into new user's data

This step is only needed when tracking referrers. Each new object will receive this incoming UTM mark with some user data you choose from the user who was a referrer. 

...

In this example, we add a new Action to the Screen record the incoming UTM on the screen itself, but you can do it on any element (depends on what you want, like to record all shares and link opens or only those who made a certain action).

...

Use the hashtag designed to pull in data from the URL itself, in this case the UTM marks we created. Full options for this hashtag are explained here - in in Data Refs in App article > Section 4 > "Current URL Route".

The general form is #Route:query:custom_name#. In the case on the picture above ↑ we called that custom_name as "utm_referal_objectid", which takes takes the UTM variable created on Step 2 (JS code line 5).

Alternative Route

You can place sharing function to a custom button, not the element taken from the palette on your left. 

In this case you will need to take care of Errors in JS and change:

In the Custom JS case, you need to create buttons or link on your own and also you must take into account different naming for each element, so name each sharing Custom JS block's button as "btnShare", "btnShare1", "btnShare2" and so on, other wise only the first script will work. 

Thats all. Ask us anything we missed here.