Custom JavaScript

What is Custom JavaScript?

Using Custom Message, you can create Web Messages which are match the image of your website

Also, Custom JavaScript makes the expression of Web Message richer. A simple use case would be that you can make Web Messages with fade-in effect or display the messages depending on how much the users scroll by using Custom JavaScript.

Warning

• We are not responsible for any loss caused by the use of this feature. For more information, please see the Repro Terms of Use(https://repro.io/company/legal/term/)

• Please make sure that this implementation will be done by those with knowledge of HTML/CSS/JavaScript.

How to use

1.Activate Custom JavaScript for Web Messages

Go to ADMINISTRATION > SETTINGS > PROJECT SETTINGS and turn on Custom JavaScript for Web Messages.

Note

• Only those with "owner" privileges can conduct this operation.

2.Create a Custom Message

Please refer to Custom Message and create a Web Message.

3.Make the expression of Custom Message richer

Select "JavaScript" in the content of the edit screen in a custom web message created in 2. You can edit JavaScript.

Please refer to this for the example of implementation.

Note

• You need to call message.show(); within the script to show the message.

• If there are no elements with data-repro--close attribute in the message, You need to call message.close() somewhere in the script. Without it, you can't close the message.

• Please note that the script is executed as a local function scope .

• Please note that the transpilation for the script is not done.

• It does not have library functions such as JQuery or file upload function, though it does not restrict the contents of Custom JavaSript.

• Linter in the JavaScript editor uses JSHint.

4.Check the created custom message.

You can use the site's preview feature to see if it works successfully.

Note

• The message displayed as a site preview does not upload any event/user profile or any data related to measuring effectiveness of the campaign.

The following sample code, reproio(track"track",[CV]click_view"); is not executed during the site preview and is not reflected in the "Event settings" section.

window.addEventListener('click', (event) => {
    message.close();
    reproio("track", "【CV】click_view");
},true)

• Please note that if an error occurs in the site preview or publication in the JavaScript written in Custom JavaScript, an error message will appear in your browser's developer tool.

Implementation examples

Please note that the follwing scripts is just samples.

1.Show the message if the user scroll by 50% of the web page.

var body = window.document.body;
var html = window.document.documentElement;
window.addEventListener('scroll', function onScroll() {
    var scrollTop = html.scrollTop || body.scrollTop;
    var pageHeight = Math.max.apply(null, [body.clientHeight, body.scrollHeight, html.scrollHeight, html.clientHeight]);
    var viewHeight = html.clientHeight || body.clientHeight;
    var scrollRate = ((scrollTop + viewHeight) / pageHeight) * 100;
    if (scrollRate > 50) {
        message.show();
        window.removeEventListener('scroll', onScroll);
    }
});

2.Delay showing message by 5 seconds.

window.setTimeout(function() {
    message.show();
}, 5000);

Security tips

Seesion cookie

This feature could be turned into a SINK for XSS if your Repro account has been hacked. To protect against such an attack, please confirm if the session’s cookie used in the website has a HttpOnly attribute.

Notes on measuring effectiveness of Custom JavaScript

• When using a control group, we recommend setting up JavaScript in the control group as well as in other patterns in order to align conditions and criteria for comparison with the control group.

(Example) You want to measure the effectiveness of the Custom message that displays a message when the page is scrolled by 50%.

When displaying a message with a 50% scrolling rate in the normal pattern, set the JavaScript to measure the CG with a 50% scrolling rate as well.

• When the control group is 0%, the following message is displayed and you can not edit JavaScript even if the tab of the control group is selected.

Note

• Please note that you will not be able to edit JavaScript itself if Custom JavaScript is not enabled.

• The timing to count as an impression is when message.show() is executed.

In the sample code below, if the user closes the site within 5 seconds of the message display trigger firing, it will not be counted as an "impression".

setTimeout(function() {
    message.show();
}, 5000);

Other notes

Behavior when switching from enabling to disabling Custom JavaScript

When you change "Activate Custom JavaScript for Web Messages" from ON to OFF in SETTINGS > PROJECT SETTINGS, it does not stop delivering the web messages, but just disable the behavior described by Custom JavaScript . If you wish to stop the web message, please stop it from the message screen.

• « Custom Message
• Available HTML tags and attributes for custom messages »