Summary:
With the evaluation of responsive web designing, we need to advance our analytics too. We have techniques and tools to know the content breakpoints, but we are devoid of the form-factors based breakpoints. Let’s have a try to include them in our GA.
Intro:
When we design for responsive website, we not design for devices, but for the different form factors means we have to address various form factors by deciding their performance metrics. This is very true in case of UX designing because we want to accelerate and optimize the user experiences for a particular device or set of devices.
Form Factors
Unfortunately, we can’t address each device individually or set of devices one-by-one due to big fragmentation issues on hardware and OS fronts, whether it is iOS and iOS devices or Android OS or Android devices. However, we can address common form factors of the every device and can categorizing them according to their form factors. We can categorize form factors by identifying device experiences in following ways:
- Through usage or posture
- Through input methods
- Through output or screen
These form factors enable us to use Google Analytics and other web and mobile analytics in our responsive designing and give perfect clues to iterate design in ongoing projects or through regular updates.
Form Factors in GA
There are WURFL.js used in the GA to measure its given form factors and we have to include it in to the source code of our responsive websites. Once we introduce WURFL.js into the page code, it creates a global object that you can access through JavaScript in GA and measure various form factors given by it like…
- App
- Smartphone
- Tablet
- Feature Phone
- Other Mobiles
- Desktop
- Smart TV
- Robot
- Other Non-Mobile Devices including wearable
Thus, your Universal GA code would be…
/* Define the custom dimensions */
ga('send', 'pageview', {
'dimension1': WURFL.complete_device_name,
'dimension2': WURFL.form_factor,
'dimension3': WURFL.is_mobile
});
Once you write or re-write GA code in website template you have to go to GA account where you have to define custom dimensions in admin panel
Admin>Custom Definitions>Custom Dimensions
Enabling Form Factors in Universal GA
Now, Google server will collect the data and you need to analyze them through your GA account in your browser so you have to make some customization of your dashboard. Now, click on
Audience>Custom>Custom Variables
For Universal GA, your custom dimensions will available along with the other standard dimensions
By enabling form factor dimensions, we can measure bounce rate and pages per visit to get big picture of their behavior on the various devices. Thus, we can draw fine conclusions in our responsive web designing projects.
Creating Widgets
GA offers a best feature to get alerts when website performance changes for custom dimensions and that in form of Widgets on Dashboard. At first place we will create Pie-Chart widget to analyze how much your responsive website is being used by different form factors.
On Dashboard, click
Add Widget>Pie>Sessions>form factor>Custom Dimension
Here you will group sessions by the form factor variables one-by-one.
Secondly, create widgets for Visits and Bounce rate same the way. Thus, you will have big picture of changes in form factors that are taking place when you make any change in your website design or programming. Of course, you have to add some filters to standard metrics in these widgets and you can do is simply selecting timeline diagram and filter the data flow with your custom variables.
If you create one widget for each of your form factor, you need to watch, you will have good ideas for your responsive website design.
Lujayn has expert responsive web designers who have perfect knowledge of SEO and various SEO tools to use in their advance designing processes.
Best Joomla Development Company 