Sales tracking and product picking | e-Commerce JS Tags

Document version 3.8.9 - Applies to V3.n Platform

TAG INTEGRATION TUTORIAL

This tutorial explains the integration process of the Popsell service into your e-Commerce platform.

The estimated time of integration should last no more than 2 hours.

Test and production environments

If the tags are to be implemented in a test environment, the web services will be called on preprod.popsell.com instead of popsell.com in each tag.

The test in domain variable must be replaced by your test server hostname, as described below.

Home page Tag (home.js)

The script must be pasted in the home page, preferably at the end of the code, before the </body> tag.

No change is required in this tag, except the domain variable on a test environment.

Product page Tag (product.js)

The script must be pasted preferably at the bottom of the product detail page, before </body>

var id_button = “”,
product_id = “#Product_ID#”,
...

The following variables must be bound:

These values must be replaced by a JavaScript variable or PHP tag for example. If possible, use Global Variables, so that if the user selects a different SKU, then the values are updated.

Warning: if the variable might contain double quotes or line feeds (eg description), make sure to escape these characters (with a backslash), otherwise the script will produce an error.

Order confirmation page (confirmation.js)

The script has to be pasted at the bottom of the order confirmation pages (pages displayed after the payment has been processed).

Your site may have several pages for each of the available payment methods.

The following variables must be bound, including a JSON list with the order details:

Example of json_list :

var json_list = [
   {“id_product”:”MT680”,”name”:”Hooded sweater”,
    ”price”:54.00,”qty”:1},
   {“id_product”:”AD231”,”name”:”Graphic tee”,
    ”price”:28.00,”qty”:2}
];

In case there is no confirmation page (ie: the external payment site does not return automatically to your ecommerce site), please contact the Popsell support for a specific implementation.

Deployment

Once the tags are integrated into the platform, Popsell will test and activate the service for your brand.

Do not forget to change the domain value in all the tags while deploying them into production.

Technical support

You can check other available options on page 2 and 3 of this document.

For any support, please contact Popsell at: tech@popsell.com

TAG INTEGRATION: OPTIONS

Several specific options are available, that brings added functionalities, or might solve technical limitations encountered in the standard process.

Product page Button (product.js) [OPTIONAL]

In order to improve the design of your product page, you can replace the fixed button automatically generated, by any custom button of your choice.

The selection button has to be inserted, usually near the “add to basket” button in the product page. It can be freely customized to fit your page style. Example:

The button must be initially set to « display: none ». It will only be displayed if the current user is a brand promoter. Example:

<a id="popsell_add" href="javascript:void();" style="display: none;">
<img width="35" height="35" border="0" alt="" src="http://yourdomain.com/img/add.png"></a>

The id of the button must be “popsell_add”, or otherwise its name must be bound in the button_id variable of the product.js tag.

Data Hash encryption [OPTIONAL]

Popsell offers an option to enforce the security of the data passed to Popsell during the order confirmation process. The objective is to avoid a hacker to pass fake order information trying to get more cash in its Popsell account.

Popsell will provide you with a KEY during the setup process. The key will be used to generate a sha1 hash of a string composed of the concatenation of the order ID, the order payment status, the amount paid (converted in cents) and the key.

This hash has to be generated on the server side, and bound into the “hash” javascript variable in the confirmation.js tag.

Example of a hash generation in PHP for #Order Hash#:

sha1($orderId.$status.strval($amount*100).”KEY”);

Check out Tag (order.js) [OPTIONAL]

If not all the data required in the confirmation page is available at that stage, it is possible to insert another tag in a checkout page, before the payment process.

The script has to be pasted at the bottom of the checkout page, i.e. the page which displays the cart or the order summary. Make sure the tag is on a page where the order cannot be updated anymore by an AJAX script (eg quantities, promo), otherwise the data sent by the tag will be wrong (data sent during page load).

Several variables have to be bound there instead of being bound in the confirmation tag:

Display of the promo code on a checkout pop-in [OPTIONAL]

If a promotion (with a web promo code) is available for the customer, it will be displayed by default on the welcome popin (scenario = 1).

This behaviour can be changed, in order to automatically display a popin with the promo code on a checkout page (scenario = 2).

To do so:

• The checkout tag (order.js) must be installed.

• Ensure that this tag is on a page where the user can enter the promo code.

• Set var scenario = 2, in the home page tag and in the product page tag.

Product picking on a multiple products page [OPTIONAL]

It is possible to add a product picking button on a page which displays a list of products (products in a category, search result page, wish list page …).

1/ The product_list.js script must be pasted at the bottom of the product list page.

2/ Add a button on each product of the list:

• The button style must be set initially to “display: none”

• Add the following click event to each button:

onclick =
"PopsellProduct.setRequest(['##PRODUCT_PAGE_URL##','##PRODUCT_IMAGE_URL##','##PRODUCT_NAME##',
'##PRODUCT_DESCRIPTION##','##PRODUCT_ID##','##PRODUCT_PRICE##']);"

Bind each values with the corresponding product data.

Warning: you must be able to get the url of a large size image of the product. Recommended minimum size is 486px for landscape photos, 236px otherwise.

CONTACT FORM TAGS [OPTIONAL]

In order to collect the data entered by a user in a form on your website, two additional tags are provided.

The first tag contact.js will be used on the page containing the form, where the user is redirected from the Popsell website.

The second tag contact-confirm.js will be used on the form confirmation page, when the user has entered and submitted his data.

These tags will enable to collect the data entered by the user, and send it back to Popsell. Popsell will insert the data in the database, to add the contact to the ambassador’s contact list, and to the gamification program.

Contact form tag (contact.js)

Paste this tag preferably at the bottom of the form page, before </body>

Only one variable has to be bound:

Auto fill of the sales rep ID

The Popsell tags create a cookie popsell_data which contains a JSON List with several values (depending on scenarios).

Example:
{ "RC":"GP00001567", "PC":"HUY879" }

You can query that cookie for the “RC” value, which contains the value of the Sales Representative ID.

It is possible to automatically fill in a specific field of your form, with the ID number that identifies the ambassador (i.e. the sales representative) into your platform.

An example of the code to fill a field is given in contact.js :

var popsell_data = JSON.parse(this.getCookie(‘popsell_data’));
// Insert extra code below (executed after popsell’s tag loading)
var my_input = document.getElementById(“client_id”);
my_input.value = popsell_data.RC;
// End of extra code

Contact validation tag (contact-confirm.js)

Call this script when the contact clicks on the button to submit the form, and bind the following variables:

Example of extra_data JSON list :

var extra_data = {
    “Organization level”:”Sales leader”,
    ”Number of children”:3,
    ”Hair color”:”Blond”
};