I am looking for a methodology to track when user swipe the slider to the right or to the left only! not anything else, only swiping.
It's possible with a custom event. This is how to capture the swipe event with the direction. First, push a custom event to the dataLayer when a slider swipe event is triggered:
<script>
$('#slider').on('swipe', function (event, slick, direction) {
dataLayer.push({"event": "sliderSwipe", "swipeDirection": direction});
});
</script>
In GTM, create a custom trigger:
Trigger name: Slider Swipe
Trigger type: Custom Event
Event name: sliderSwipe
Trigger fires on: All custom events
Create a user-defined variable:
Variable name: Swipe Direction
Variable type: Data Layer Variable
Data layer variable name: swipeDirection
Create a new tag:
Tag type: Google Analytics: Universal Analytics
Category: Slider
Action: Swipe
Label: {{Swipe Direction}}
Trigger: Slider Swipe
Related
I'm currently creating an electron application (Frontend is in Vue) which can trigger native Drag-and-Drop-Operations. These Operations behave strange if i trigger them with HTML5 Drag Events (like dragstart, dragstop, etc.). So I have to implement my own Drag-and-Drop Handler using mouseup, mousedown and mousemove. So in simple theory:
If MouseDown is triggered -> Set Flag
If MouseUp is triggered -> Remove Flag
If MouseMove AND Flag -> checkCurrentPosition vs. initialPosition -> Do something
new Vue({
el: "#app",
data: {
mousedown: false
},
methods: {
onMouseDown: function(e){
console.log('mousedown');
this.mousedown = true;
},
onMouseUp: function(e){
console.log('mouseup');
this.mousedown = false;
},
onMouseMove: function(e){
if(this.mousedown) {
console.log('mousedown && mousemove');
console.log('clientX:', e.clientX);
console.log('clientY:', e.clientY);
}
},
}
})
Fiddle
if you check this example, open up your browsers console and play a little bit around with the image (click, drag and drop,...) you will see that if you drag the placeholder image, the mousedown event is triggered and the flag is set. Then I would expect that the mousemove event would be triggered frequently, but this is not happening.
Normally if you bind mousemove to some Div its triggered frequently if you hover with your mouse over it and you can get the actual position for example. But this is not happening after mousedown.
NOTE: The mouseup event in the Fiddle is not bound to Window, so if you Drop the Element outside of its area the mouseup event will not be triggered for the element. So the flag is not removed and then you can see the behaviour I would expect. the mousemove event is frequently triggered. So I think that the problem is that while the mouse is pressed the mousemove event is not triggered correctly.
Example:
Lets say you have a screen with list items loaded into this.state.items.
Now you have a button that navigates you to a new screen.
On this screen you want to append an item to that list.
Once you dismiss that screen, you'll be back at the screen with the original list items.
What is the best way to achieve the goal of updating that list with the new item?
Should this be done by:
1. Passing the new screen the this.state object.
2. By calling an update function on the old screen? (Function probably passed as a prop to the new screen.)
3. Using the StackNavigator's prop in function?
4. Another way?
I appreciate any help.
You should pass a callback that updates the state through the navigate action:
this.props.navigation.navigate('NewScreen', {
addItem: item => this.setState(prevState => ({ items: prevState.items.concat([item]) })),
});
Then call it in the new screen to add an item:
this.props.navigation.state.params.addItem(newItem);
Using a state management library like mobx if your component state is extracted into Stores, the second screen component can update the store and all components that injects this store will be auto updated.
Is there a way to invoke a function when the back swipe gesture is performed?
My view has a custom back button on the top left corner of the navbar. When that button is pressed, I clean up code, then the view is popped. I'm looking to perform this same clean up code when the StackNavigator's back gesture is performed on this particular view. Is this possible using the default back swipe gesture?
You can subscribe to the navigation listeners, on the particular screen where you want to perform the operation.
The transitions can be listened by
const didBlurSubscription = this.props.navigation.addListener(
'didBlur',
payload => {
console.debug('didBlur', payload);
}
);
The JSON object for the payload will look like this
{
action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
lastState: undefined,
state: undefined,
type: 'didBlur',
};
therefore you can add a conditional based on the lastState
Also dont forget to remove the listener
didBlurSubscription.remove();
I am very new to Vue.js. In fact I just started today.
I have a problem.
Let's say I have button in a table somewhere in dom.
<table>
<tr><td><button v-on:click="showModal">Show</button>
</table>
Now I have a modal box outside of the scope of the button.
This button is inside a component of itself and the modal box has a component of itself too.
I am passing in an id with this button, and what I want to do is:
Fetch the id on button click
Show the record fetched in the modal and then finally perform some action on it
My problem is I am unable to get a method in the Modal component (that does a http request and fetches and renders the data) to trigger by the click event of this button.
The button and the modal has no relationship, they are not parent/child.
In modal component trigger method to fetch data by component ready state:
ready: function() {
this.getAllTheDataYouNeed();
},
You may use another life cycle hook:
https://vuejs.org/guide/instance.html#Lifecycle-Diagram
An option was to add the event broadcast in the common ancestor of both the components.
Like this:
var main = new Vue({
el: 'body',
components: {
zmodal : zmodal,
showhidebtn : showhidebtn,
},
methods: {
showModal: function (currentId) {
this.$broadcast('openModalBox', currentId);
}
}
});
Add an event listener in 'zmodal' and call this function showModal from on click event of 'showhidebtn' component.
It is working but now I have a set of codes outside the components that have to be triggered for this to work.
I wonder if there is a better way to do this.
I'm working on a Sencha touch app. Inside a listener, I set up a panel with hideOnMaskTap set to true (based on code from the floating components documentation):
onTap: function() {
Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
...
}
This works as expected. Apart from hiding the panel, I would like to call a function when the user taps on the mask. After looking at the sencha documentation and having googled many things, I haven't been able to find a way to make such a call.
Any pointers would be greatly appreciated.
When modal:true and hideOnMaskTap:true, once you click on the mask, the component will be hidden. This will fire the hide event.
hide( Ext.Component this, Object eOpts )
Fires whenever the Component is hidden
Write your code in the handler for this event.