Skip to content

Issue/9 create events example #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CarlSargunar wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Issue/9 create events example #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0ae8e66
Change library reference for static
CarlSargunar Dec 21, 2020
11882d4
Also did the main example
CarlSargunar Dec 21, 2020
16380d6
Set up
CarlSargunar Dec 22, 2020
f390ae2
Create map funciton
CarlSargunar Dec 22, 2020
936e5b6
Hooked up events
CarlSargunar Dec 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion codeexamples/autocomplete.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../lib/loop54-js-connector.js"> </script>
<script type="text/javascript" src="https://static.loop54.com/lib/js/loop54-js-connector.js"> </script>
Copy link

@joelwkall joelwkall Dec 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't want these to use the statically published connector. If it points to a local file, these examples can be verified that the library still works as intended when doing changes. There are probably better ways to do that than to just pointing to a relative file path, since that requires a web server running (or allowing local scripts in the browser), but it's better than not being able to do it at all.

Copy link
Author

@CarlSargunar CarlSargunar Dec 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool - yeah, makes sense

Copy link
Author

@CarlSargunar CarlSargunar Dec 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll have a think about this - not sure what the best way to handle this is. Perhaps just download a copy of the library and distribute it with the sample, but then you have the pain of keeping it up to date

However, maybe that's something to consider - if the library changes, perhaps the examples need to change too

Copy link

@joelwkall joelwkall Dec 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, having a distributed version that you need to keep up to date would be pretty annoying. I think just referencing the built version is fine - it means you have to run npm start for the samples to work, but I think we can live with that.

<script type="text/javascript" src="autocomplete.js"> </script>
<title>Loop54 autocomplete code examples</title>
</head>
Expand Down
2 changes: 1 addition & 1 deletion codeexamples/categorylisting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../lib/loop54-js-connector.js"> </script>
<script type="text/javascript" src="https://static.loop54.com/lib/js/loop54-js-connector.js"> </script>
<script type="text/javascript" src="categorylisting.js"> </script>
<title>Loop54 category listing code examples</title>
</head>
Expand Down
26 changes: 26 additions & 0 deletions codeexamples/eventstracking.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://static.loop54.com/lib/js/loop54-js-connector.js"> </script>
<script type="text/javascript" src="eventtracking.js"> </script>
<title>Loop54 multi-event tracking code examples</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
</div>
<div>
<ul>
<li><a href="index.html">Index</a></li>
</ul>
</div>
<script>
var client = Loop54.getClient("http://helloworld.54proxy.com");

var productIds = ["1","2","3","5","7","11"];
createMultiEventsExample(client, productIds);
</script>
</body>
</html>
6 changes: 3 additions & 3 deletions codeexamples/eventtracking.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../lib/loop54-js-connector.js"> </script>
<script type="text/javascript" src="https://static.loop54.com/lib/js/loop54-js-connector.js"> </script>
<script type="text/javascript" src="eventtracking.js"> </script>
<title>Loop54 event tracking code examples</title>
<title>Loop54 single-event tracking code examples</title>
</head>
<body>
<noscript>
Expand All @@ -20,7 +20,7 @@
var client = Loop54.getClient("http://helloworld.54proxy.com");

var productId = "1";
createEventsExample(client, productId);
createSingleEventExample(client, productId);
</script>
</body>
</html>
82 changes: 62 additions & 20 deletions codeexamples/eventtracking.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,99 @@
function createEventsExample(client, productId) {
console.log("create-events:");

// Multi Event Tracking Example
function createMultiEventsExample(client, productIds) {
console.log("create-multi-events:");
console.log(productIds);

// CODE SAMPLE create-events BEGIN
// click event (can be called on the product page)
var clickedEntity = {type: "Product", id: productId};
var clickedEntities = productIds.map(function (value, index, array) {
return { type: "click", entity: { type: "Product", id: value } };
});

client.createEvents(clickedEntities, response => {
console.log("click events response", response);
});

// addtocart event (call this when a customer adds a product to cart)
var addToCartEntities = productIds.map(function (value, index, array) {
return { type: "addtocart", entity: { type: "Product", id: value } };
});
client.createEvents(addToCartEntities, response => {
console.log("add to cart response", response);
});

// purchase events (can be called when an order is processed, or on the "thank you" page)
// orderId is Optional but recommended
// quantity is optional
// revenue is optional
var purchasedEntities = productIds.map(function (value, index, array) {
return { type: "purchase", entity: { type: "Product", id: value }, orderId: "13t09j1g", quantity: 5, revenue: 249.0 };
});

//createEvent also works with promises
var purchasePromise = client.createEvents(purchasedEntities).then(response => {
console.log("purchase response", response);
});
// CODE SAMPLE END
purchasePromise.then((r) => console.log("create-multi-events (end)"))

// TODO : Add Custom Data Examples
};

// Single Event Tracking Example
function createSingleEventExample(client, productId) {
console.log("create-sigle-event:");

// CODE SAMPLE create-event BEGIN
Copy link

@joelwkall joelwkall Dec 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These CODE SAMPLE segments are for our public documentation to fetch code from here. I'm thinking about whether we want to change those.

Copy link
Author

@CarlSargunar CarlSargunar Dec 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see - ok - I guess I'll leave that with you - let me know if you want to leave the CODE SAMPLE comments in there or not

Copy link

@joelwkall joelwkall Dec 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's best to leave the CODE SAMPLE comments in this file as they were, and just not have any CODE SAMPLE sections for the new functions. We should probably sort it out and have separate examples on docs.loop54.com, but then we need to make the same change in the other 3 libraries and I think that's out of scope for now.

// click event (can be called on the product page)
var clickedEntity = { type: "Product", id: productId };
client.createEvent("click", clickedEntity, response => {
console.log("click event response", response);
});

// addtocart event (call this when a customer adds a product to cart)
var addToCartEntity = {type: "Product", id: productId};
var addToCartEntity = { type: "Product", id: productId };
client.createEvent("addtocart", addToCartEntity, response => {
console.log("add to cart response", response);
});

// purchase events (can be called when an order is processed, or on the "thank you" page)
var purchasedEntity = {type: "Product", id: productId};
// purchase event (can be called when an order is processed, or on the "thank you" page)
var purchasedEntity = { type: "Product", id: productId };
var orderId = "13t09j1g"; //Optional but recommended
var quantity = 5; //Optional
var revenue = 249.0; //Optional

//createEvent also works with promises
var purchasePromise = client.createEvent("purchase", purchasedEntity, orderId, quantity, revenue).then(response => {
console.log("purchase response", response);
});
// CODE SAMPLE END
purchasePromise.then((r)=>console.log("create-events (end)"))
// CODE SAMPLE create-events-customdata BEGIN
purchasePromise.then((r) => console.log("create-single-event (end)"))


// CODE SAMPLE create-event-customdata BEGIN
var withCustomDataPromise = client.createEvent(
"purchase",
purchasedEntity,
orderId,
quantity,
revenue,
{customData: {someproperty: "somevalue"}}
{ customData: { someproperty: "somevalue" } }
).then(response => {
console.log("purchase response with custom data", response);
});
// CODE SAMPLE END
withCustomDataPromise.then((r) => console.log("create-events-customdata (end)"));
withCustomDataPromise.then((r) => console.log("create-event-customdata (end)"));


// CODE SAMPLE create-events-custom-user-id BEGIN
// CODE SAMPLE create-event-custom-user-id BEGIN
//create a client with a custom ID
var clientWithCustomId = Loop54.getClient("http://helloworld.54proxy.com", "someCustomId");

//use that client just like a normal client
var clickedEntity = {type: "Product", id: productId};
var clickedEntity = { type: "Product", id: productId };
var customIdPromise = clientWithCustomId.createEvent("click", clickedEntity, response => {
console.log("click event response with custom id", response);
});
// CODE SAMPLE END
customIdPromise.then((r) => console.log("create-events-custom-user-id (end)"));
customIdPromise.then((r) => console.log("create-event-custom-user-id (end)"));
};
2 changes: 1 addition & 1 deletion codeexamples/faceting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../lib/loop54-js-connector.js"> </script>
<script type="text/javascript" src="https://static.loop54.com/lib/js/loop54-js-connector.js"> </script>
<script type="text/javascript" src="faceting.js"> </script>
<title>Loop54 faceting code examples</title>
</head>
Expand Down
10 changes: 9 additions & 1 deletion codeexamples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,22 @@
<div id="root">
</div>
<div>
<p>These examples output to the javascript console. To view the output, open developer tools (F12) and examine the javascript console.</p>
Copy link

@joelwkall joelwkall Dec 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

Copy link
Author

@CarlSargunar CarlSargunar Dec 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can see these are very much WIP, and I suspect over time developers may find it easier to work with a working example site built to work with the JS library - with working rendered results etc

It may even contribute towards the take up of your engine :-)

(which is very good by the way - I'm currently integrating this for my client to go live next week)

Copy link

@joelwkall joelwkall Dec 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the code samples and /public are both very much WIP. A full-blown example web app would be great, but we haven't had time to add that yet.
Thank you for the compliment on the engine. Let me know if you have improvement suggestions for that as well!

<p>
<ul>
<li><a href="autocomplete.html">AutoComplete examples</a></li>
<li><a href="categorylisting.html">Category listing examples</a></li>
<li><a href="eventtracking.html">Event tracking examples</a></li>
<li>Event tracking examples:
<ul>
<li><a href="eventtracking.html">Single Event tracking examples</a></li>
<li><a href="eventstracking.html">Multi Event tracking examples</a></li>
</ul>
</li>
<li><a href="faceting.html">Faceting examples</a></li>
<li><a href="search.html">Search examples</a></li>
<li><a href="sync.html">Sync examples</a></li>
</ul>
</p>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion codeexamples/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../lib/loop54-js-connector.js"> </script>
<script type="text/javascript" src="https://static.loop54.com/lib/js/loop54-js-connector.js"> </script>
<script type="text/javascript" src="search.js"> </script>
<title>Loop54 search code examples</title>
</head>
Expand Down
2 changes: 1 addition & 1 deletion codeexamples/sync.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../lib/loop54-js-connector.js"> </script>
<script type="text/javascript" src="https://static.loop54.com/lib/js/loop54-js-connector.js"> </script>
<script type="text/javascript" src="sync.js"> </script>
<title>Loop54 sync code examples</title>
</head>
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ <h2>Facets</h2>

<div id="searchResult"></div>
<script src="nouislider.min.js"></script>
<script src="loop54-js-connector.js"></script>
<script type="text/javascript" src="https://static.loop54.com/lib/js/loop54-js-connector.js"> </script>
<script type="text/javascript">

//IE polyfills
Expand Down