Guarding Digital Performance and User Experience. Balancing Third-Party Tags and Website Performance

Size: px

Start display at page:

Download "Guarding Digital Performance and User Experience. Balancing Third-Party Tags and Website Performance"

Felix Harvey
5 years ago
Views:

1 Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance

2 Content Chapter 1 Everything You Need to Know About Tags...4 What are tags? What are tags used for? How do tags transfer data? Why are tags important? Chapter 2 Innovating Digital Performance in the Modern World...6 Defining digital performance digital assets and how they re designed to fit user experience and why the point is to provide a unique, unparalleled experience How does performance factor into business initiatives and KPIs Chapter 3 Identifying Performance Impact of Third-Party Content...8 How tags affect performance What tags do that hinders user-experience What tools can you leverage for visibility into this impact? Chapter 4 Six Ways to Find the Balance Between Tags and Performance...11 Best Practices 1. Foster collaboration and interoperability between departments 2. Choose tags wisely 3. Load tags asynchronously 4. Use a tag management system 5. Implement SLAs for third party vendors 6. Leverage a synthetic monitoring tool, like AlertSite, to catch issues early, fix problems, and hold third party vendors accountable

3 Introduction Software powers the world. At SmartBear, we know that for every application, there is a software team working hard behind the scenes to keep users happy. We create the software tools that development, testing, and operations teams use to deliver the highest quality and best performing software possible, shipped at seemingly impossible velocities. With products for code review, API and UI level testing, and monitoring across mobile, web and desktop applications, we equip every member of your team with tools to ensure quality at every stage of the software cycle. Our AlertSite team supports businesses in monitoring and maintaining a stellar user-experience with accurate, actionable performance insights for web and mobile applications, websites, and APIs. After witnessing third-party content becoming the base object of a page, and subsequently creating performance problems for one of our customers, we wanted to explore how third-party tags and content impact website performance, and explain how you can identify the effects, remediate issues, and find a balance between third-party tags and performance. Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 3

4 Chapter 1 Everything You Need to Know About Tags What Are Tags? Tags are small snippets of JavaScript code or small transparent pixels embedded on a page that can be used to collect data from a website. Tags are sometimes referred to as pixels or beacons, and can take the form of HTML, IFRAME, style, script, objects, and other types to collect information. These tags help connect third-party software to digital properties, adding functionalities like web analytics, campaign analytics, audience measurement, personalization, A/B testing, retargeting, conversion tracking, ad serving, and more to a site with a few lines of code. What Are Tags Used For? Tags shed light on key aspects of your digital presence, serve advertisements, and provide you with the flexibility to deliver features and functionalities that may be provided by a third-party. From enterprise environments to small businesses to personal projects, tags span every inch of our digital environment, so understanding the advantages and risks is vital to sustaining a great web performance. Tags can be used for a variety of different functionalities including: User Analytics A/B Tests Marketing Analytics Real-Time Chat Bots Commenting Functionalities Serving Advertisements And more Tags help drive analytics and innovation, both of which are essential in maintaining your brand and delivering a exceptional end-user experience. Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 4

The tag code on your site acts as a director for the browser, connecting to third-party servers and collecting relevant data from the browser.

1 Web browser requests webpage from websiteõs servers 2 Website servers send page content and third-party tag code to browser 3 Browser executes tag

user-preferences Why Are Tags Important? Innovation and improvement stem from feedback and data analysis.

5 How Do Tags Transfer Data? Tags can load synchronously, in sequential order with the rest of your website code, or asynchronously, loading simultaneously with your content. The tag code on your site acts as a director for the browser, connecting to third-party servers and collecting relevant data from the browser. Tags can also read and set cookies, or strings of code that can remember user preferences and actions. 1 Web browser requests webpage from websiteõs servers 2 Website servers send page content and third-party tag code to browser 3 Browser executes tag code and collects data 4 Tag intructions browser to send data to data collection server 5 Data collection web server sends cookie data on user-preferences Why Are Tags Important? Innovation and improvement stem from feedback and data analysis. In a world where digital presence has the potential to make, or break, a business, tags are essential for understanding your users and improving your marketing efforts. But, since tags are injected into site code, they also have the potential to impact your website s performance. Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 5

6 Chapter 2 Innovating Digital Performance in the Modern World Defining Digital Performance Understanding how to deliver a fast, unique, and compelling online experience can drive profitability, increase customer loyalty, and enhance brand perception. But retaining long term success in this digital age requires keeping pace with digital disruption and adapting accordingly. With retail ecommerce sales reaching $1.915 trillion in 2016 and accounting for 8.7% of total retail spending worldwide, it s no secret that digital sales have factored into almost every business strategy 1. Monitoring essential digital KPIs, including both website performance and business metrics, helps you ensure that you re on the right path. Digital Performance embodies the success and efficiency of your online assets, like a website, applications, network, and even APIs. Fueled by the explosion in popularity of ecommerce, IoT, and the continuous evolution of the online environment as we know it, digital performance is a way to analyze the difference between delivered experience and perceived experience. 1 Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 6

7 Attribution and Analysis Optimizing digital performance requires analysis and iterative improvements to increase and maintain your ability to deliver a unique experience. However, understanding digital performance is two-fold. One perspective is to look at users personas, actions on the site, response to marketing initiatives, completed checkouts, etc. Tags are a key factor in collecting data to understand users and their actions and are the cornerstone of attribution measurements for most businesses. Another way to understand your ability to deliver is through a performance monitoring tool. Performance monitoring tools keep track of your site s performance and availability, so you have insight into your site speed, availability, and more. By leveraging these two methods, you have full ability to assess your comprehensive digital performance, and continue to innovate and improve. However, with great potential comes great responsibility, and balancing tags and website performance is no exception. Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 7

8 Chapter 3 Identifying Performance Impact of Third-Party Content Tags Impact Performance While tags offer great promise, they are injected into your website site code, interact directly with your content, and can change the way your website renders with a user. Small, but mighty, tags can have a profound impact on your websites performance, and not always in a good way. At its core, a tag is code. Code dictates the way a website performs, loads, and changes, and like any other element of your site, a tag must be placed with care. Tags can affect a website in some of the following ways: 1. Slow Page Load 2. Blocking Page/Content Load 3. Flickering Page Content 4. Hinder Responsiveness 5. Loss of Functionality 6. Unavailability Since tags depend on third-party providers, businesses lose a significant amount of control over the performance of their content. Should something go wrong with the third-party content providers, such as an outage, downtime, or even a small bug, your end-users will feel the effects, and so will your brand perception. So how can you proactively manage the effect that third party content will have on your site? Synthetic Monitoring. Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 8

Identifying and Remediating Impact Understanding how third-party tags impact your site may seem daunting, but with the right tool it becomes a simple, seamless process.

9 Identifying and Remediating Impact Understanding how third-party tags impact your site may seem daunting, but with the right tool it becomes a simple, seamless process. We took a first-hand look at a website, People.com, which serves ads as well as native content, both of which make up its online revenue strategy. We loaded the site in Safari, using the web extenstion, Ghostery, which aims to detecting and blocking thousands of third-party data-tracking technologies, to visualize the loading process. After observing over 30 tags firing in the first few seconds of loading the page, we knew we had to dig a bit deeper. (fig.1) Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 9

10 We created a monitor within AlertSite, our synthetic performance monitoring platform, to help understand the page s loading process and performance. Setting up a monitor is quick and easy and can include a user journey or simply and up/down page performance analysis. For the purpose of this test, we set up a simple user journey, hovering over certain elements of the page, so we could glean insight into the page load time and the object level details for the page. The monitor in AlertSite rendered the following results (fig.1). We re able to see from an object level, what is causing the page to load slowly, and what tags are interacting with content on the page. Drilling down into object level details is a good start when you re trying to understand how tags impact your page s performance. Additionally, setting up a monitor to run with performance thresholds can empower you to attend to other responsibilities while AlertSite will run performance checks at intervals you set, detecting performance anomalies, availability changes, as well as functional correctness evaluations, so that if anything were to impact your site, AlertSite would send an alert with contextual details to relevant individuals. Using a tool like AlertSite is a great way to proactively manage your digital performance. Understanding how to implement changes in your organization that will reflect a better digital experience for your end-users is a matter of checks and balances. Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 10

11 Chapter 4 Six Ways to Find the Balance Between Tags and Performance Best Practices 1 2 Foster Collaboration and Interoperability Between Departments It takes a village to optimize performance. Digital assets are not stand-alone elements, and as such, it takes multiple departments to make changes to maintain and uphold excellent digital performance. Cultivating a regular cadence of communication can help strengthen your ability to work efficiently and effectively together to make sure that any third-party content injected into your site or any website updates do not cancel each other out or negatively impact performance. Between Departments Tags not only interact with your website content, but they also interact with each other. Ensuring that each tag plays well with another is vital to validating the data they collect as well as their effectiveness in collecting data all together. Managing and choosing tags properly becomes easier if you set up time to accomplish the following: Audit your website regularly to make sure your tags are up-to-date Identify essential tags and remove any redundant tags Remove tags that are no longer in use Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 11

12 3 Load Tags Asynchronously Setting tags to load asynchronously can help ensure that slow loading tags do not hinder your content from loading. Asynchronous tag load means that tags load simultaneously with each other and your site content. While synchronous loading for some tags optimizes data collection, it can be risky to implement too many of these types of tags. Since synchronous tags load sequentially, if one tag does not load it can slow down or stop other content from loading Caveat: If the third-party tags experience loading problems, the web page will not complete the onload event, preventing other tags from collecting data or site changes, like loading the proper version of the web page, from executing. 2 3 Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 12

13 4 Use a Tag Management System Tag Management Systems have optimized the way that tags are placed and fire on your website. Tag Management systems replace multiple tags with a single container tag, empowering businesses to prioritize firing order, add business rules, and more. Tag Management Systems allow departments to control the tag implementation process with testing environments, audit trail and version control, de-duplication, and security permissions for those with access to the tag manager. From a performance stand point, the key benefits include: Conditional loading rules Asynchronous loading rules for the tag manager code Reduce DNS resolutions - tag libraries hosted from the same domain Script Compression Leverage CDNs - deliver web site vendor tags quicker and more efficiently 5 Implement SLAs for Third-Party Vendors Making sure that third-party vendors maintain the same level of performance excellence as your organization can sometimes be a challenge. Implementing a Service Level Agreement (SLA) that outlines your standards and expectations can help increase transparency and hold vendors to an agreed upon standard. With SLAs, organizations and vendors alike can: Establish an agreement that meets your performance and availability expectations Communicate an explicitly stated expected performance requirement Monitor and measure performance, functional correctness, and available to hold each other accountable Caveat: Relying on third-party CDNs can pose some issues, should the server content not be mirrored properly. Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 13

14 6 Implement a Synthetic Performance Monitoring Tool Synthetic performance monitoring tools, like AlertSite, act as an early warning system, proactively assessing and monitoring the performance, availability, and functional correctness of your website and APIs. Gaining deeper visibility into the health and performance of your digital assets is key in making data driven decisions to improve and innovate performance. Using synthetic performance monitoring tools to identify and remediate impact of third-party content is easy because it empowers businesses to: Monitor website performance and impact of tags to find and fix issues with root-cause information, including object level details Know about performance anomalies before real end-users experience slow loading time, failed page loads, unresponsiveness, and more. Maintain SLAs and hold vendors accountable Immediately gain insight into which tags are preventing optimal performance 3 Ensuring that tags don t negatively affect the content of your website, as well as ensuring that tags operate properly together, is unequivocally vital to gleaning insight into your digital performance. Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 14

15 Conclusion Tags offer great promise for understanding user behavior as well as innovating user experience. But with great potential comes great responsibility updating and maintaining the tags you place is vital to delivering a stellar user-experience. Managing tags has become more complex as tag functionality and web design evolve, but leveraging tools, like AlertSite, that make the process more transparent, help derive the root-cause, and provide actionable data to help improve performance makes tag and website management a lot easier. Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 15

16 AlertSite AlertSite is the Early Warning System You Can Trust Get Started Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 16

The Leader In Software Quality Tools For Teams Our unique approach infuses quality and speed into your entire software development lifecycle, so teams can work together to create the best software on

17 The Leader In Software Quality Tools For Teams Our unique approach infuses quality and speed into your entire software development lifecycle, so teams can work together to create the best software on the planet, faster than ever. Accelerate Dev/Test/Ops Workflows Improve Quality at Every Stage Reduce Complexity Gain End-to-End Visibility Improve Release Confidence Reduce Costs 6.5M+ Users K+ Countries Companies More About SmartBear Guarding Digital Performance and User Experience Balancing Third-Party Tags and Website Performance 17

Uptime and Proactive Support Services

Uptime and Proactive Support Services We ll accelerate your journey to sustainable IT optimisation and ensure that your technology is delivering all that it can. We ll keep your IT infrastructure up and