Comments (7)
Here are the mutation events that add and remove the social proof message on tkmaxx.com.
Removal is done by adding t098-hide
to the class name:
from dark-patterns.
Next steps we discussed in the meeting today:
- only process mutation events for elements in the viewport
- start capturing events after
onload
- find the segment responsible for each element
- log all mut. evt,. details, element attributes (style, innerText, innerHtml) and segment attributes
- try https://github.com/rafaelw/mutation-summary to see if it'll make the event processing simpler and faster
from dark-patterns.
I started a new branch of OpenWPM and added the mutation observer code. Here are observer console logs from two pages: https://gist.github.com/gunesacar/dd1b5db95bcc5d8ea04d5b9f2cf447b1
I excluded logs created during the page load.
If you can give me a short list of interesting pages to check, I can get us the mutation observer logs.
from dark-patterns.
https://www.the-house.com/ac3asw06bs18zz-arcteryx-vests.html [Look for stock notifications on click]
https://voe21.com/collections/all-products-1/products/2018-version-of-anti-theft-backpack [Look for the countdown clock and social proof]
https://www.tkmaxx.com/women/activewear/outdoor/pastel-blue-lightweight-padded-milo-jacket/p/07026204 [Social proof]
We also need a way to organize these logs together based on target
.
from dark-patterns.
What other records do we see? Could you please share a log for this website (post page load)?
from dark-patterns.
Sure, all three are here: https://gist.github.com/gunesacar/fddfc3e41001ea0aa1e90dccd1546193
Here are the logs voe21, I filtered them to better show the countdown events. Scroll right to see the timer countdown.
untitled:2: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:6: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "19" } 2018-version-of-anti-theft-backpack:646:11
untitled:10: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "4" } 2018-version-of-anti-theft-backpack:646:11
untitled:18: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:22: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:26: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "19" } 2018-version-of-anti-theft-backpack:646:11
untitled:30: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "3" } 2018-version-of-anti-theft-backpack:646:11
untitled:38: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:42: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:46: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "19" } 2018-version-of-anti-theft-backpack:646:11
untitled:50: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "2" } 2018-version-of-anti-theft-backpack:646:11
untitled:58: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:62: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:66: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "19" } 2018-version-of-anti-theft-backpack:646:11
untitled:70: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "1" } 2018-version-of-anti-theft-backpack:646:11
untitled:78: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:82: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:86: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "19" } 2018-version-of-anti-theft-backpack:646:11
untitled:90: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:101: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:105: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "0" } 2018-version-of-anti-theft-backpack:646:11
untitled:109: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "18" } 2018-version-of-anti-theft-backpack:646:11
untitled:113: MutationRecord { type: "attributes", target: <span.soon-group.soon-group-sub>, addedNodes: NodeList[0], removedNodes: NodeList[0], previousSibling: null, nextSibling: null, attributeName: "data-value", attributeNamespace: null, oldValue: "59" } 2018-version-of-anti-theft-backpack:646:11
from dark-patterns.
We instead used Mutation Summary library, which worked more efficiently and appear to capture all the changes we need. The relevant issue is here: #14
from dark-patterns.
Related Issues (20)
- Move product attribute code to Javascript HOT 1
- Store number of buttons, imgs, links inside each segment HOT 1
- Store details of the longest text node of each segment HOT 1
- Handle cases where computed style is null HOT 4
- Integrate segmentation into mutation summary event flow HOT 2
- Rate limit/throttle segmentation and element snapshots HOT 1
- Add unique IDs to elements HOT 1
- Handling body elements with 0 width and height
- Build a clustering dashboard HOT 1
- Incorrect background-color value HOT 3
- Link segments to phases HOT 2
- Evaluate the accuracy of shopping website detection HOT 2
- Evaluate accuracy of checkout crawler HOT 1
- Limit product attribute selection HOT 1
- Clustering preprocessing
- Related Work section HOT 1
- Introduction section
- Methods section HOT 1
- Clean up the analysis notebooks
- usage: cluster_browser_http.py [-h] clusters_pickle cluster_id_column cluster_browser_http.py: error: the following arguments are required: clusters_pickle, cluster_id_column
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dark-patterns.