Skip to content

Instantly share code, notes, and snippets.

@nanha
Created May 13, 2019 07:23
Show Gist options
  • Save nanha/4784b576e5abf6d84be7d97e6c0a2ee2 to your computer and use it in GitHub Desktop.
Save nanha/4784b576e5abf6d84be7d97e6c0a2ee2 to your computer and use it in GitHub Desktop.
Recopick 개인화 랜딩페이지 AB Test// source https://jsbin.com/tanorog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Recopick 개인화 랜딩페이지 AB Test</title>
<script src="https://ajax-plab.skplanet.com/v1/project/nanhapark_project/datafile.js"></script>
<script src="https://api-plab.skplanet.com/dist/plab-web-sdk.min.js"></script>
<script>
plab.init({
projectKey: "nanhapark_project",
datafile: plabDatafile
});
</script>
<!-- RecoPick 로그수집 스크립트 171208 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
(function(w,d,n,s,e,o) {
w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='http://static.recopick.com/dist/production.min.js';
o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
})(window, document, 'recoPick', 'script');
recoPick('service', 'justone.co.kr/m');
</script>
<!-- RecoPick 로그수집 스크립트 -->
</head>
<body>
<script>
(function(doc, key, widgetId) {
plab.start(key);
var opt = plab.getVariable(key);
if (opt.enableFeature) {
showRecopickLanding({
widgetId
});
}
doc.body.setAttribute('data-log-actionid-area', key);
function showRecopickLanding(options) {
var $container = doc.querySelector('body');
var elChild = doc.createElement('div');
elChild.setAttribute('data-log-actionid-area', key);
with (elChild.style) {
position = 'absolute';
top = 0; left = 0;
zIndex = 10000;
width = '100%'; height = '100%';
backgroundColor = '#fff';
}
elChild.innerHTML = `
<div id="recopick_widget_${options.widgetId}" data-widget_id="${options.widgetId}"></div>
`;
doc.body.insertBefore(elChild, doc.body.firstChild);
// Recopick 다음_랜딩M 스크립트 20190411
(function(w,n){w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};}(window, 'recoPick'));
recoPick('widget2', 'recopick_widget_' + options.widgetId);
setTimeout(function() {
elChild.style.height = 'auto';
}, 1000);
}
})(document, 'RecopickLandingPage', 'eie5yKcb');
</script>
<h1>Recopick 개인화 랜딩페이지 데모</h1>
<div id="container" style="width: 500px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id augue eget ipsum venenatis pharetra. Nunc vitae dictum purus, vitae hendrerit mauris. Mauris mattis posuere leo. Maecenas non tincidunt nibh. Integer cursus pellentesque dolor ac condimentum. Praesent ultricies lacus faucibus velit dapibus, ac sollicitudin dolor auctor. Morbi dapibus nunc quis sollicitudin ullamcorper. Praesent a dui luctus nisl dignissim varius sed id augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tincidunt luctus tortor eu laoreet.
Morbi efficitur diam id arcu posuere, nec efficitur lectus lobortis. Integer ut erat ultrices, tempus eros laoreet, facilisis metus. Phasellus id nunc eu enim auctor tincidunt. Aliquam erat volutpat. Maecenas ut mauris in justo pellentesque lacinia. Donec eu semper metus. Cras leo ipsum, fermentum vel euismod nec, aliquam a sapien. Sed eu condimentum ex. Quisque a lorem non eros maximus faucibus. Suspendisse sollicitudin mi nisi, nec porta leo sollicitudin quis. Duis cursus id orci vitae maximus. Praesent sollicitudin justo eros, non consectetur urna aliquet eu. Mauris vestibulum sollicitudin laoreet.
Duis tortor sem, porttitor a porttitor sit amet, mattis et risus. Cras hendrerit augue dapibus, convallis orci eu, commodo nunc. Phasellus blandit varius suscipit. Nulla ut tellus sapien. Integer sit amet purus venenatis, ultrices leo non, molestie ex. Sed accumsan mattis orci quis varius. Nunc et placerat eros, at aliquet diam.
Aenean dictum, metus bibendum volutpat pharetra, turpis tortor bibendum nunc, sed vehicula massa dui et urna. Praesent ac bibendum magna. Curabitur tincidunt, enim sit amet sollicitudin lobortis, nisl dui condimentum libero, quis suscipit ante diam id felis. Mauris dictum convallis dignissim. Sed nec consectetur arcu. Proin nec pharetra magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed placerat nisl sit amet quam blandit porta. Cras massa tellus, interdum id ante eget, aliquet pellentesque neque. In mollis erat et libero varius volutpat. Cras gravida ante ut turpis pretium dictum. Etiam nisi tortor, sagittis eget quam eu, commodo sollicitudin tortor. Praesent vitae dignissim orci. Pellentesque posuere velit rhoncus, rutrum nisi ac, sagittis turpis. Nullam mattis laoreet eros at fermentum.
Maecenas a lacinia dui. Donec leo augue, fringilla sit amet mi quis, consequat maximus odio. Duis facilisis enim sapien, sed venenatis tellus efficitur at. Praesent et volutpat orci, ac elementum tellus. Proin tincidunt metus sit amet sapien dignissim, nec scelerisque tellus efficitur. Vestibulum vitae quam nisl. Cras sollicitudin pharetra massa eu suscipit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id augue eget ipsum venenatis pharetra. Nunc vitae dictum purus, vitae hendrerit mauris. Mauris mattis posuere leo. Maecenas non tincidunt nibh. Integer cursus pellentesque dolor ac condimentum. Praesent ultricies lacus faucibus velit dapibus, ac sollicitudin dolor auctor. Morbi dapibus nunc quis sollicitudin ullamcorper. Praesent a dui luctus nisl dignissim varius sed id augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tincidunt luctus tortor eu laoreet.
Morbi efficitur diam id arcu posuere, nec efficitur lectus lobortis. Integer ut erat ultrices, tempus eros laoreet, facilisis metus. Phasellus id nunc eu enim auctor tincidunt. Aliquam erat volutpat. Maecenas ut mauris in justo pellentesque lacinia. Donec eu semper metus. Cras leo ipsum, fermentum vel euismod nec, aliquam a sapien. Sed eu condimentum ex. Quisque a lorem non eros maximus faucibus. Suspendisse sollicitudin mi nisi, nec porta leo sollicitudin quis. Duis cursus id orci vitae maximus. Praesent sollicitudin justo eros, non consectetur urna aliquet eu. Mauris vestibulum sollicitudin laoreet.
Duis tortor sem, porttitor a porttitor sit amet, mattis et risus. Cras hendrerit augue dapibus, convallis orci eu, commodo nunc. Phasellus blandit varius suscipit. Nulla ut tellus sapien. Integer sit amet purus venenatis, ultrices leo non, molestie ex. Sed accumsan mattis orci quis varius. Nunc et placerat eros, at aliquet diam.
Aenean dictum, metus bibendum volutpat pharetra, turpis tortor bibendum nunc, sed vehicula massa dui et urna. Praesent ac bibendum magna. Curabitur tincidunt, enim sit amet sollicitudin lobortis, nisl dui condimentum libero, quis suscipit ante diam id felis. Mauris dictum convallis dignissim. Sed nec consectetur arcu. Proin nec pharetra magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed placerat nisl sit amet quam blandit porta. Cras massa tellus, interdum id ante eget, aliquet pellentesque neque. In mollis erat et libero varius volutpat. Cras gravida ante ut turpis pretium dictum. Etiam nisi tortor, sagittis eget quam eu, commodo sollicitudin tortor. Praesent vitae dignissim orci. Pellentesque posuere velit rhoncus, rutrum nisi ac, sagittis turpis. Nullam mattis laoreet eros at fermentum.
Maecenas a lacinia dui. Donec leo augue, fringilla sit amet mi quis, consequat maximus odio. Duis facilisis enim sapien, sed venenatis tellus efficitur at. Praesent et volutpat orci, ac elementum tellus. Proin tincidunt metus sit amet sapien dignissim, nec scelerisque tellus efficitur. Vestibulum vitae quam nisl. Cras sollicitudin pharetra massa eu suscipit.
</div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Recopick 개인화 랜딩페이지 AB Test</title>
<script src="https://ajax-plab.skplanet.com/v1/project/nanhapark_project/datafile.js"><\/script>
<script src="https://api-plab.skplanet.com/dist/plab-web-sdk.min.js"><\/script>
<script>
plab.init({
projectKey: "nanhapark_project",
datafile: plabDatafile
});
<\/script>
<\!-- RecoPick 로그수집 스크립트 171208 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"><\/script>
<script>
(function(w,d,n,s,e,o) {
w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
})(window, document, 'recoPick', 'script');
recoPick('service', 'justone.co.kr/m');
<\/script>
<\!-- RecoPick 로그수집 스크립트 -->
</head>
<body>
<script>
(function(doc, key, widgetId) {
plab.start(key);
var opt = plab.getVariable(key);
if (opt.enableFeature) {
showRecopickLanding({
widgetId
});
}
doc.body.setAttribute('data-log-actionid-area', key);
function showRecopickLanding(options) {
var $container = doc.querySelector('body');
var elChild = doc.createElement('div');
elChild.setAttribute('data-log-actionid-area', key);
with (elChild.style) {
position = 'absolute';
top = 0; left = 0;
zIndex = 10000;
width = '100%'; height = '100%';
backgroundColor = '#fff';
}
elChild.innerHTML = `
<div id="recopick_widget_${options.widgetId}" data-widget_id="${options.widgetId}"></div>
`;
doc.body.insertBefore(elChild, doc.body.firstChild);
// Recopick 다음_랜딩M 스크립트 20190411
(function(w,n){w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};}(window, 'recoPick'));
recoPick('widget2', 'recopick_widget_' + options.widgetId);
setTimeout(function() {
elChild.style.height = 'auto';
}, 1000);
}
})(document, 'RecopickLandingPage', 'eie5yKcb');
<\/script>
<h1>Recopick 개인화 랜딩페이지 데모</h1>
<div id="container" style="width: 500px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id augue eget ipsum venenatis pharetra. Nunc vitae dictum purus, vitae hendrerit mauris. Mauris mattis posuere leo. Maecenas non tincidunt nibh. Integer cursus pellentesque dolor ac condimentum. Praesent ultricies lacus faucibus velit dapibus, ac sollicitudin dolor auctor. Morbi dapibus nunc quis sollicitudin ullamcorper. Praesent a dui luctus nisl dignissim varius sed id augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tincidunt luctus tortor eu laoreet.
Morbi efficitur diam id arcu posuere, nec efficitur lectus lobortis. Integer ut erat ultrices, tempus eros laoreet, facilisis metus. Phasellus id nunc eu enim auctor tincidunt. Aliquam erat volutpat. Maecenas ut mauris in justo pellentesque lacinia. Donec eu semper metus. Cras leo ipsum, fermentum vel euismod nec, aliquam a sapien. Sed eu condimentum ex. Quisque a lorem non eros maximus faucibus. Suspendisse sollicitudin mi nisi, nec porta leo sollicitudin quis. Duis cursus id orci vitae maximus. Praesent sollicitudin justo eros, non consectetur urna aliquet eu. Mauris vestibulum sollicitudin laoreet.
Duis tortor sem, porttitor a porttitor sit amet, mattis et risus. Cras hendrerit augue dapibus, convallis orci eu, commodo nunc. Phasellus blandit varius suscipit. Nulla ut tellus sapien. Integer sit amet purus venenatis, ultrices leo non, molestie ex. Sed accumsan mattis orci quis varius. Nunc et placerat eros, at aliquet diam.
Aenean dictum, metus bibendum volutpat pharetra, turpis tortor bibendum nunc, sed vehicula massa dui et urna. Praesent ac bibendum magna. Curabitur tincidunt, enim sit amet sollicitudin lobortis, nisl dui condimentum libero, quis suscipit ante diam id felis. Mauris dictum convallis dignissim. Sed nec consectetur arcu. Proin nec pharetra magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed placerat nisl sit amet quam blandit porta. Cras massa tellus, interdum id ante eget, aliquet pellentesque neque. In mollis erat et libero varius volutpat. Cras gravida ante ut turpis pretium dictum. Etiam nisi tortor, sagittis eget quam eu, commodo sollicitudin tortor. Praesent vitae dignissim orci. Pellentesque posuere velit rhoncus, rutrum nisi ac, sagittis turpis. Nullam mattis laoreet eros at fermentum.
Maecenas a lacinia dui. Donec leo augue, fringilla sit amet mi quis, consequat maximus odio. Duis facilisis enim sapien, sed venenatis tellus efficitur at. Praesent et volutpat orci, ac elementum tellus. Proin tincidunt metus sit amet sapien dignissim, nec scelerisque tellus efficitur. Vestibulum vitae quam nisl. Cras sollicitudin pharetra massa eu suscipit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id augue eget ipsum venenatis pharetra. Nunc vitae dictum purus, vitae hendrerit mauris. Mauris mattis posuere leo. Maecenas non tincidunt nibh. Integer cursus pellentesque dolor ac condimentum. Praesent ultricies lacus faucibus velit dapibus, ac sollicitudin dolor auctor. Morbi dapibus nunc quis sollicitudin ullamcorper. Praesent a dui luctus nisl dignissim varius sed id augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tincidunt luctus tortor eu laoreet.
Morbi efficitur diam id arcu posuere, nec efficitur lectus lobortis. Integer ut erat ultrices, tempus eros laoreet, facilisis metus. Phasellus id nunc eu enim auctor tincidunt. Aliquam erat volutpat. Maecenas ut mauris in justo pellentesque lacinia. Donec eu semper metus. Cras leo ipsum, fermentum vel euismod nec, aliquam a sapien. Sed eu condimentum ex. Quisque a lorem non eros maximus faucibus. Suspendisse sollicitudin mi nisi, nec porta leo sollicitudin quis. Duis cursus id orci vitae maximus. Praesent sollicitudin justo eros, non consectetur urna aliquet eu. Mauris vestibulum sollicitudin laoreet.
Duis tortor sem, porttitor a porttitor sit amet, mattis et risus. Cras hendrerit augue dapibus, convallis orci eu, commodo nunc. Phasellus blandit varius suscipit. Nulla ut tellus sapien. Integer sit amet purus venenatis, ultrices leo non, molestie ex. Sed accumsan mattis orci quis varius. Nunc et placerat eros, at aliquet diam.
Aenean dictum, metus bibendum volutpat pharetra, turpis tortor bibendum nunc, sed vehicula massa dui et urna. Praesent ac bibendum magna. Curabitur tincidunt, enim sit amet sollicitudin lobortis, nisl dui condimentum libero, quis suscipit ante diam id felis. Mauris dictum convallis dignissim. Sed nec consectetur arcu. Proin nec pharetra magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed placerat nisl sit amet quam blandit porta. Cras massa tellus, interdum id ante eget, aliquet pellentesque neque. In mollis erat et libero varius volutpat. Cras gravida ante ut turpis pretium dictum. Etiam nisi tortor, sagittis eget quam eu, commodo sollicitudin tortor. Praesent vitae dignissim orci. Pellentesque posuere velit rhoncus, rutrum nisi ac, sagittis turpis. Nullam mattis laoreet eros at fermentum.
Maecenas a lacinia dui. Donec leo augue, fringilla sit amet mi quis, consequat maximus odio. Duis facilisis enim sapien, sed venenatis tellus efficitur at. Praesent et volutpat orci, ac elementum tellus. Proin tincidunt metus sit amet sapien dignissim, nec scelerisque tellus efficitur. Vestibulum vitae quam nisl. Cras sollicitudin pharetra massa eu suscipit.
</div>
</body>
</html>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment