React IFDO react Module
npm install react-ifdobash
npm i react-ifdo
`
Usage
Initializing ReactIFDO and Tracking Pageviews : Create a RouterIFDOTracker.js file. And define the code as below.
###### RouterIFDOTracker.js
`js
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import ReactIFDO from "react-ifdo";
const RouterIFDOTracker = () => {
const location = useLocation();
const [initialized, setInitialized] = useState(false);
useEffect(() => {
ReactIFDO.initialize('NTA0000000011'); // Initializing ReactIFDO
setInitialized(true);
}, []);
useEffect(() => {
if(initialized) {
ReactIFDO.pageView(location.pathname + location.search); // Tracking Pageviews
}
}, [initialized, location]);
};
export default RouterIFDOTracker;
`
This function is called where Router is defined.
###### Router.js
`js
...
import RouterIFDOTracker from './RouterIFDOTracker';
function Router() {
RouterIFDOTracker();
return(
...
);
}
export default Router;
`
For a working demo have a look at the demo files or clone this repo and run npm install npm start then open http://localhost:8080 and follow the instructions. Demo requires you to have your own TrackingID.
API
#### ReactIFDO.initialize('GCODE')
This function must be used to initialize ReactIFDO before other tracking functions can record data. If you want to get a GCODE, Sign up here IFDO Join and apply for the service.
###### Example
`js
ReactIFDO.initialize('NTA0000000011');
`
| Value | Notes |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| GCODE | String. Required. IFDO Tracking CODE like NTA0000000011. |
#### ReactIFDO.pageView(path)
It functions to track page views. Must be declared with initialize() function. The path is passed as a parameter, but not directly by this function. If you want to specify a path, check the function below.
###### Example
`js
ReactIFDO.pageView();
`
#### Variable Settings
You have to set the necessary variables for each page, such as membership registration(1), product details(2), shopping basket(3), purchase(4) , internal search(5) , and wishList(6).
##### 1. Member Registration Analysis
Set the following variables on the membership registration page. The variables required for this page are membership ID and membership status.
###### Example
`js
ReactIFDO._NB_JID = "david";
ReactIFDO._SEND("join"); // or ReactIFDO._SEND("withdraw");
`
| Value | Notes|
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _NB_JID | String. Required. Join ID like david. |
| _SEND | String. Required. Sign up/cancellation status like join or withdraw.|
After setting the variable, call the _SEND() function is required. See the _SEND() function below.
##### 2. Product Inquiry Analysis
These are the variables required for the product detail page. Write it according to the product category, product name, product code, price, product image, and whether it is out of stock. You also need to set the member attribute value at the top.
###### Example
`js
ReactIFDO._NB_ID = 'david';
ReactIFDO._NB_EMAIL = 'david@test.com';
ReactIFDO._NB_UDF = { 'udf01': '', 'udf02': '', 'udf03': '', 'udf04': '' };
ReactIFDO._NB_CT = 'outer';
ReactIFDO._NB_PD = 'padding';
ReactIFDO._NB_PC = 'a-15978';
ReactIFDO._NB_AMT = 48000;
ReactIFDO._NB_DAMT = 36000;
ReactIFDO._NB_IMG = 'https://www.example.com/productImg.jpg';
ReactIFDO._NB_PD_USE = '';
ReactIFDO._SEND("prodDetail");
`
| Value | Notes|
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _NB_CT | String. Optional. Product category like outer. |
| _NB_PD | String. Required. Name of the product like padding. |
| _NB_PC | String. Optional. Product code like a-15978. |
| _NB_AMT | Number. Required. Product price like 48000. |
| _NB_DAMT | Number. Required. Discounted Product price like 36000.|
| _NB_IMG | Object. Optional. Product image url like https://www.example.com/productImg.jpg. |
| _NB_PD_USE | String. Required. The default is blank. if it is out of stock, Enter N. |
After setting the variable, call the _SEND() function is required. See the _SEND() function below.
##### 3. Shopping Cart Analysis
Variable required for shopping cart page. 'u' must be entered as a shopping cart separator. You also need to set the member attribute value at the top.
###### ReactIFDO._NB_LO.push({PC : '', PN : 'Product Name', CT : '', AM : 'Amount', PR : 'Product Total Amount'});
or
###### ReactIFDO._NB_LO.push( {PC : 'Product Code', PN : 'Product Name', CT : 'Category', AM : 'Amount', PR : 'Product Total Amount'} );
###### Example
`js
ReactIFDO._NB_ID = 'david';
ReactIFDO._NB_EMAIL = 'david@test.com';
ReactIFDO._NB_UDF = { 'udf01': '', 'udf02': '', 'udf03': '', 'udf04': '' };
for (...) {
// 장바구니 상품 리스트 객체
ReactIFDO._NB_LO.push({ PC : 'a-15978', PN : 'padding', CT : 'outer', AM : 1, PR : 32000 });
}
ReactIFDO._SEND("cart");
`
| Value | Notes|
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _NB_LO.push | object. Required. Enter in the object format that contains each information like { PC : 'a-15978', PN : 'padding', CT : 'outer', AM : 1, PR : 32000 }. |
| PC | String. Optional. Product code like a-15978. |
| PN | String. Required. Name of the product like padding. |
| CT | String. Optional. Product Category like outer. |
| AM | Number. Required. Number of Orders like 1. |
| PR | Number. Required. Total amount of product like 32000. |
After setting the variable, call the _SEND() function is required. See the _SEND() function below.
##### 4. Order Form Analysis
Variable required for order form page. 'f' must be entered as a order form separator. You also need to set the member attribute value at the top.
###### ReactIFDO._NB_LO.push({PC : '', PN : 'Product Name', CT : '', AM : 'Amount', PR : 'Product Total Amount'});
or
###### ReactIFDO._NB_LO.push( {PC : 'Product Code', PN : 'Product Name', CT : 'Category', AM : 'Amount', PR : 'Product Total Amount'} );
###### Example
`js
ReactIFDO._NB_ID = 'david';
ReactIFDO._NB_EMAIL = 'david@test.com';
ReactIFDO._NB_UDF = { 'udf01': '', 'udf02': '', 'udf03': '', 'udf04': '' };
for (...) {
// 주문서 상품 리스트 객체
ReactIFDO._NB_LO.push({ PC : 'a-15978', PN : 'padding', CT : 'outer', AM : 1, PR : 32000 });
}
ReactIFDO._SEND("orderform");
`
| Value | Notes|
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _NB_LO.push | object. Required. Enter in the object format that contains each information like { PC : 'a-15978', PN : 'padding', CT : 'outer', AM : 1, PR : 32000 }. |
| PC | String. Optional. Product code like a-15978. |
| PN | String. Required. Name of the product like padding. |
| CT | String. Optional. Product Category like outer. |
| AM | Number. Required. Number of Orders like 1. |
| PR | Number. Required. Total amount of product like 32000. |
After setting the variable, call the _SEND() function is required. See the _SEND() function below.
##### 5. Purchase Analysis
Set the following variables on the order completion page. Be especially careful when creating the NB_LO.push variable. Even if it is an optional value, you must also enter a required variable name. Please look carefully at the format and fill it out accordingly. You also need to set the member attribute value at the top.
###### ReactIFDO._NB_LO.push({PC : '', PN : 'Product Name', CT : '', AM : 'Amount', PR : 'Product Total Amount'});
or
###### ReactIFDO._NB_LO.push({PC : 'Product Code', PN : 'Product Name', CT : 'Category', AM : 'Amount', PR : 'Product Total Amount'});
###### Example
`js
ReactIFDO._NB_ID = 'david';
ReactIFDO._NB_EMAIL = 'david@test.com';
ReactIFDO._NB_UDF = { 'udf01': '', 'udf02': '', 'udf03': '', 'udf04': '' };
ReactIFDO._NB_ORD_NO = "ord-154982";
ReactIFDO._NB_ORD_AMT = 5;
for (...) {
// 구매 상품 리스트 객체
ReactIFDO._NB_LO.push({ PC : 'a-15978', PN : 'padding', CT : 'outer', AM : 1, PR : 32000 });
}
ReactIFDO._SEND("order");
`
| Value | Notes|
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _NB_ORD_NO | String. Required. Order Number like ord-154982. |
| _NB_ORD_AMT | Number. Required. Number of Orders like 5. |
| _NB_LO.push | object. Required. Enter in the object format that contains each information like { PC : 'a-15978', PN : 'padding', CT : 'outer', AM : 1, PR : 32000 }. |
| PC | String. Optional. Product code like a-15978. |
| PN | String. Required. Name of the product like padding. |
| CT | String. Optional. Product Category like outer. |
| AM | Number. Required. Number of Orders like 1. |
| PR | Number. Required. Total amount of product like 32000. |
After setting the variable, call the _SEND() function is required. See the _SEND() function below.
##### 6. Internal Search Analysis
Fill out the product search page. A variable representing each keyword and the number of search results. You also need to set the member attribute value at the top.
###### Example
`js
ReactIFDO._NB_ID = 'david';
ReactIFDO._NB_EMAIL = 'david@test.com';
ReactIFDO._NB_UDF = { 'udf01': '', 'udf02': '', 'udf03': '', 'udf04': '' };
ReactIFDO._NB_kwd = 'black dress';
ReactIFDO._NB_AMT = 20;
ReactIFDO._SEND("prodSearch");
`
| Value | Notes|
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _NB_kwd | String. Required. Internal search terms like black dress. |
| _NB_AMT | Number. Required. Number of internal search results like 20. |
After setting the variable, call the _SEND() function is required. See the _SEND() function below.
##### 7. Wish List Analysis
Lastly, the wish list page. You must create a separation value for the wish list with w . And be careful when you write the _NB_LO.push() function. You also need to set the member attribute value at the top.
###### ReactIFDO._NB_LO.push({PC : '', PN : 'Product Name', CT : '', AM : 'Amount', PR : 'Product Total Amount'});
or
###### ReactIFDO._NB_LO.push({PC : 'Product Code', PN : 'Product Name', CT : 'Category', AM : 'Amount', PR : 'Product Total Amount'});
###### Example
`js
ReactIFDO._NB_ID = 'david';
ReactIFDO._NB_EMAIL = 'david@test.com';
ReactIFDO._NB_UDF = { 'udf01': '', 'udf02': '', 'udf03': '', 'udf04': '' };
for (...) {
// 위시 리스트 상품 리스트 객체
ReactIFDO._NB_LO.push({ PC : 'a-15978', PN : 'padding', CT : 'outer', AM : 1, PR : 32000 });
}
ReactIFDO._SEND("wishList");
`
| Value | Notes|
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _NB_LO.push | object. Required. Enter in the object format that contains each information like { PC: 'a-15978', PN: 'padding', CT: 'outer', AM: 1, PR: 32000 }. |
| PC | String. Optional. Product code like a-15980. |
| PN | String. Required. Name of the product like padding. |
| CT | String. Optional. Product Category like outer. |
| AM | Number. Required. Number of Orders like 1. |
| PR | Number. Required. Total amount of product like 32000. |
After setting the variable, call the _SEND() function is required. See the _SEND() function below.
#### ReactIFDO._SEND()
Function called after each page's variable is declared. At this time, if there is a path you want to specify, you can put it as the second factor value.
###### Example
`js
ReactIFDO._SEND('join');
`
If you are setting a direct path,
`js
ReactIFDO._SEND('join','https://www.example.com');
`
After you finish writing the script code for each page, the script installation is complete.
Development
$3
- node.js
- npm
- npm install
- npm install react@^15.6.1 prop-types@^15.5.10
$3
`bash
npm test
``