i have set up gtag.js and i am able to send custom events and view them in the data studio.
However i do not know how to pass custom properties so the names and values of these show up in the data studio and i can "select" them for a graph.
my sample code is the following
window.gtag('event', 'Old Layout', {
event_category: 'Layout changes',
event_action: 'change layout',
event_label: 'switch to old layout',
event_value: $(this).prop('checked'),});
but when i try to select dimensions it only gives me "event name" and "is conversion event".
How should i pass the custom properties so i can select as "dimension"?
You need to define the properties as custom dimensions or metrics in the Configure->Custom definitions section. If you then refresh the fields in the data source, they should show up.
You can use more descriptive properties in GA4. And use their naming convention so your events will be usable. e.g.
window.gtag('event', 'layout_changed', {
layout_used: $(this).prop('checked') ? 'new' : 'old'
});
Related
I have no react, typscript or d3 experience prior to this.
I am trying to build a horizontal bar chart where I can customize the colours of the bar depending on the value of the bar
I have gotten this far. See this chart:
I need to change the conditional formatting customization so the color is not entered from a drop down and is a text area where I can enter the hex code.
This is what I need to change and the condiditional formating I am talking about. It is on the table chart:
I have traced it back to the following code in controlPanel.tsx
{
label: t('Options'),
expanded: true,
controlSetRows: [
[
{
name: 'conditional_formatting',
config: {
type: 'ConditionalFormattingControl',
renderTrigger: true,
label: t('Conditional formatting'),
description: t(
'Apply conditional color formatting to numeric columns',
The actual pop up where you enter the field and color you want to associate the colour appears to be in
/superset/superset-frontend/src/explore/components/controls/ConditionalFormatingcontrol folder. So what I was hoping to do was to copy that, make my changes and call it. However I have no idea how I need to compile it and no idea how to call it
My guess was I could change the type below to the name of the copy of the component I created if I had compiled things correctly
name: 'conditional_formatting',
config: {
type: 'ConditionalFormattingControl',
Can anyone help me?
The available chart customization controls for a chart in superset set appear to be located in
/superset/superset-frontend/src/expore/components/controls
The list of chart customization controls exported that are available for list is in
/superset/superset-frontend/src/expore/components/controls/index.js
To customize one or to create a new component for customizing a custom chart in superset copy put in the directory listed above that you have copied and changed from the directory above or created and change the index.js file so that it is exported for use
I'm currently attempting to build an Airtable-esque filter component. I'm wondering if it is possible to use the useGlobalFilter hook to choose what columns to filter a table by programmatically. For example, Airtable implements table filtering using a component that lives outside of a given table's boundaries. Inside of this component, there is a dropdown menu to choose which column to apply a filterValue and a dropdown to choose the filterType for a given column. Based on react-table's documentation, it appears that useGlobalFilter is used to build filtering components that exist outside of the table. However, based on the documentation's code sandbox example, for filtering, it also appears that useGlobalFilter applies the filter value to all columns rather than to specific columns.
My question would be if it's possible to use useGlobalFilter's ability to create filtering UI outside of a table and have a way to select what columns to apply a filterValue & filterType, all from within the global filter?
If this is possible, would anyone be willing to provide tips or advice on the implementation? Please let me know if this task would be more suited for useFilter or another part of react-table's API.
I've provided a screenshot of Airtable's filter component as an example of what I'd like to build. Any feedback or advice would be much appreciated!
`const columns = React.useMemo(
() => [
{
Header: 'Group Name',
accessor: 'name',
// disableGlobalFilter: true
},
{
Header: 'Created',
accessor: 'sector',
disableGlobalFilter: true,
},
],
[]
)`
Add this in the column array inside the column where you want to disable global filter
I'm trying to get google tag manager to track a couple of different buttons on a site. We're currently unable to change the site to aid with this, so we have to find a solution solely with tag manager.
There are several buttons on the site all with the same format as to the two below.. they all have "submit" as the type and a unique term for value so I'm trying to use the tag manager Form Listener which picks up on type="submit". Is there any variable I can use to pull the value field into my event so I can create individual goals in analytics?
etc etc
Any help is greatly appreciated.
You can use built-in variable "Click Element", then create custom JS-variable:
function(){
try{
return {{element}}.getAttribute("value"); //I am not sure now if it is {{element}} or {{Click Element}}
}catch(err){}
}
This will give you a value attribute of clicked button.
Maybe a useful link by Simo Ahava:
http://www.simoahava.com/analytics/track-form-engagement-with-google-tag-manager/#3
You can use built-in auto-event variable Element Attribute to get value. And be sure to use click tracking and not form tracking, because you want to track button clicks and not form submissions.
I am maintaining a site that allows users to create a profile of sorts that will allow them to broadcast activities to a feed. I implement ng-grid to keep track of all the profiles that are created, and have created two buttons that allow users to create/edit these profiles. My only problem right now is, when users select a row on the grid and attempt to edit that specific row, the drop-down menu is not auto-populated with the data from ngModel.
This is the part of the form I am having trouble with:
<select ng-model="source.canSendTo" ng-options="value.name for value in sourceCanSendTo" data-style="btn" bs-select></select>
And within the controller, I have sourceCanSendTo defined as:
$scope.sourceCanSendTo = [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ];
On row selection, I simply set source = the selected item, and console.logs show that all the data is there. The other parts of the form are being populated properly (mainly s), and console.log($scope.source.canSendTo) shows that the original data is there, it's just that select is defaulted to being blank...how would I go about trying to pre-select certain elements on the drop-down select I currently have?
For example, if the profile has 'abc', 'bcd' selected, how can I make it so that when I edit that profile, the drop down box shows 'abc,bcd' instead of just "Nothing Selected"?
Edit: I previously responded to a comment inquiring about bs-select, saying that it simply controlled some CSS elements of the drop down box - seems like this is completely incorrect after a quick google search when everything else led to dead ends. Does anyone have any idea how to properly initialize the model with data so that when I preload my form, the 'can send to' drop down select actually has the selected options selected, as opposed to saying "Nothing Selected"? Thanks in advance for all help!
As you are binding source.canSendTo to the name (value.name) of sourceCanSendTo then you just need to initially have an structure binding the names which had been saved, something like this:
source.canSendTo = ['abc', 'bcd']; //And all the selected values
So you need to construct your source.canSendTo property to this structure.
PS: If you show how you bring your data from the server, I can help you to construct the source.canSendTo property.
$scope.canSendTo must be initialized with a reference to the selected option.
var initialSelection = 0;
$scope.source = { canSendTo : [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ] };
$scope.canSendTo = $scope.source.canSendTo[initialSelection];
Finally found out what was wrong with my code - seems like the data being stored in the model wasn't the same as what was in ngOptions, played around a bit with ngOptions and managed to get something that works. Working snippet of code:
<select ng-model="sendTo.name" ng-option="value.name as value.name for value in sourceCanSendTo" data-style="btn" multiple bs-select>
(Realized that the variable being used for ngModel was a fairly ambiguous in terms of naming convention, changed it)
I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page