Introduction¶

The web browser extension allows non-admin users to quickly view and repair website issues. Many of the same sections from the app are available to edit, such as SEO, accessibility, quality assurance, policies, statistics, heatmaps, and more. The extension can even be used to view certain things about external websites.

Many of the same sections from the app are available to edit, such as SEO, accessibility, quality assurance, policies, statistics, heatmaps, and more. The browser extension can even be used to view certain things about external websites.

This article gives instructions on how to manage a website with the web browser extension.

Prerequisites¶

1. Add the script to the website.

   For more information, see the user guide article:

   Add script.

2. Configure the scan.

   For more information, see the user guide article:

   Configure scans

3. Scan the website at least one time to populate the fields.

Installation¶

This section gives information on how to install the web browser extension on different browsers.

Tip: When you open the application, the option and links to add the extension are listed on the right side of the page. It is easier to add the extension in that way.

Install in Chrome¶

1. Navigate to the extension in the Chrome Webstore
2. Click Add to Chrome, on the top right-hand side of the page.
3. A pop-up verification opens. Click Add Extension. The pop-up closes.
4. Add the extension icon to the Chrome menu bar, if it does not appear automatically.

Install in Edge (Chromium)¶

Microsoft introduced a newer version of the Edge browser based on Chromium, allowing users to install the same extensions in Edge as are available in Chrome and other Chromium-based browsers. To check which version of Edge you use, you can use this guide: Microsoft Edge Guide

1. Navigate to the extension in the New Acquia Optimize extension - Microsoft Edge Add-ons
2. Click Get, on the top right-hand side of the page.
3. A pop-up verification opens. Click Add Extension. The pop-up closes.
4. Add the extension icon to the Edge menu bar, if it does not appear automatically.

Install in Firefox¶

1. Click to navigate to the Acquia Optimize Extension for Firefox.
2. A dialog box opens, asking you to confirm. It says, "Add New Acquia Optimize extension? This extension will have permission to:
   • Access your data for all websites
   • Access browser tabs.
3. Click Add. The pop-up closes.
4. Add the extension icon to the Firefox menu bar, if it does not appear automatically.

Instructions¶

This section gives instructions on how to find and use the features in the Acquia Optimize Web Extension. The toolbar buttons are, from top to bottom:

• Content issues (insect icon): This is an overview of potential issues with error content, as identified by the most recent scan.

• Heatmaps (flame icon): Click to open the heatmap for the page.

  Note

  This button only appears in the Web Browser Extension if you have installed Heatmaps.

• Page Info (information icon): This is an overview of the webpage structure that is included in the scan.
• Single Page Scan (recycle icon): Click for an overview of single-page scans for the current page. Single-page scans are done by the application, not the web browser extension.
• Note

  • Our IP address must be whitelisted for the single-page scan to work. The IP addresses we use are:
    • United States and Canada: 35.226.117.128
    • UK and Europe: 130.211.65.55
    • Australia and New Zealand: 35.189.0.46.
• View Options (eye icon): Click for details about the viewing resolution and see options to adjust the view for the current page.
• Toolkit (tools icon): Click to view highlighting tools that give information on the website structure and properties, as they relate to accessibility issues.
• Open in Monsido (box with arrow-out icon): Click to redirect to the statistics view for the current page in the application.
• Settings (gear icon): Click to view user settings, manage extensions, clear the cache, and get general information for the current page.
  Skip to the instructions on how to use this section.
• Close (X icon): Click to close the toolbar.

Content Issues (insect icon)¶

Click to expand the Content Issues menu.

The information shown is:

• Scan Information: Click the arrow to expand the field. The field shows the date that the page was last crawled, and buttons to Start new scan and Show scanned source for the current page.

  • Start new scan: Click to start a scan on the current page. A rotating icon and the text, "Scan in progress" are shown until the scan is complete.
  • Show Scanned Source: Click to view the HTML source code on the current page. Search the HTML source code for a text string, or click X to close the HTML source code and return to the previous view.

  For more information about the scan, see the user guide articles:

  • How do you find and handle links on my website with the scan
  • Configure scans

• Quality Assurance: Click the arrow to expand the field. The field shows a quick overview of the number of broken links, broken images, misspellings, and potential misspellings on the current page. If there are any errors, the See Issues button is visible. Click See Issues to open a window and view the errors in more detail.

  • Mark as fixed: Marks the issue as fixed. It will be included in subsequent scans and if the error returns, it will appear again in the broken links list. Select this option when the error is actually fixed by the web team on the HTML code of the webpage.

  • Mark as ignored: Ignore the issue. Use this option if you know the issue is, in fact, OK. Ignored issues are not included in subsequent scans and will not show up as broken.

    Notes

    • The difference between Fixed and Ignore is that issues marked as Fixed are still included in future scans and can be flagged again if the error persists. Issues that are set to Ignore are permanently omitted from future scans and compliance scores.
    • Ignored links will appear on the scan again if the status of the link changes. For example, a link that was marked broken as 404 and ignored will reset if the same link gets a new Ok status of, for example, 200. If in the future that link starts returning a 404 error again, it will reappear on the broken links report.

  • Click HTML (a </> icon) to open the HTML code and locate the error in the code.

    Tip: For non-HTML users, this is a great place to take a screenshot to send to the web developer for a permanent fix.

  • Click Highlight (a magnifying glass icon) to highlight the error on the webpage.

    Note

    Select HTML (a </> icon) instead if you see this message:
    ​Highlighting currently unavailable. The element isn't visually highlightable or the source code might have been changed by the time the page has loaded.

  For more information, see the user guide article:

  Quality assurance feature

• Accessibility: Click the arrow to expand the field. Snippets from the HTML page are listed. Each issue gives the options to:

  • Mark as Reviewed: Click to indicate that the issue has been reviewed. 
  • Note

    In the case of alt text snippets, be sure that the alt text is correctly repaired in the HTML code before you click Mark as Reviewed. This button indicates that the issue is resolved and it will not show up on subsequent scans. If it has not been actually fixed correctly, this could give a false compliance score.

  • HTML (Less than/Greater than icon): Shows where in the code that this snippet is located.
  • Highlight (Magnifying glass icon): Highlights the issue on the webpage.
  • Policies: Click the arrow to expand the field. An overview shows the Policies Score and Policy violations for the current page. If there are any errors, a button See Issues redirects to the Statistics page, where the errors can be corrected.

  For more information, see the user guide articles for:

  • Statistics
  • Policies

• SEO (Search Engine Optimization): Click the arrow to expand the field. An overview shows the SEO Score and SEO Issues for the current page. If there are any errors, a button See Issues redirects to the Statistics page, where you can correct the errors.

  For more information, see the user guide article:

  Search Engine Optimization

• Performance: Click the arrow to expand the field. If there are any errors, a button Show in Acquia Optimize redirects to the Performance page, where you can see the performance of the page.

  For more information, see the user guide article:

  Performance

Heatmaps (flame icon)¶

This shows the heatmap for the page. The heatmap is based on a sample of your total visitors.

• Scale: Cold (blue) to Warm (dark red). The heatmap visualizes the most and least popular areas of the page on a scale from warm (red) to cold (blue) with shades in between.
• Display heatmap: Click to turn the heatmap display On or Off.
• Device type: Choose a device to show heatmap data for.
  • Desktop and laptop devices
  • Tablet devices
  • Mobile devices.
• Heatmap type: Choose the type of user behavior that you want to track:
  • Move: The move map shows you where the users moved and paused their cursor across your site. Research suggests that there is a connection between the mouse movement and where their attention is. This kind of heat map is useful to indicate which parts of the page the user might be looking at and where their attention span is.
    ​Note: This map is only available for desktop devices.
  • Click: The click map indicates where the users click or tap on their devices. This kind of heat map shows the most frequently clicked areas, which can give some idea of what your visitors are trying to interact with.
  • Scroll: The scroll map shows how far the users scroll on the page. Dark red indicates the areas where most visitors scroll. This type of heat map can be used to see what information reaches the majority of your visitors, and is useful also for determining what data on the page is ignored or missed.
• Heatmap type: Choose the browser that you want to track:
  • All (selects all browsers)
  • Firefox
  • Chrome
  • Safari
  • Microsoft Edge
  • Internet Explorer
  • Opera.
• Snapshot time: Click the drop-down arrow to select the timeframe for the heatmap:
  • Last week
  • Last month
  • Last quarter.

For more information, see the user guide article:

Heatmaps

Page Info (info icon)¶

This section gives an overview of the webpage structure that the scan shows.

• Page Information: Expand the section to view the URL address and the number of characters, and the page title with the number of characters.
• Headings: Expand the section to view the page headings and the number of characters.
• Metadata: Expand to view the page metadata with the number of characters.

Single Page Scan (rotation icon)¶

Click to do a scan on a single page. This option is available with or without a user subscription.

For more information, see the user guide article:

Single-page scan

View Options (eye icon)¶

This button shows the viewing resolution and offers options to adjust the view for the current page.

• Screen Resolution: Expand the section to adjust the following:
  • Choose device type for best viewing:
    • Desktop and laptop device
    • Tablet device
    • Mobile device.
  • Create custom screen resolutions.
    • Width: Click in the field and use the arrows to navigate up and down through the resolution choices.
    • Height: Click in the field and use the arrows to navigate up and down through the resolution choices.
    • Reset screen: Reset the resolution to the default value.
• Most Visitors Resolutions: Expand the section to view the resolution settings used by the majority of visitors to the site.
• View Options: Expand the section to view the options available:
  • Enable CSS: Click to turn this option OFF or ON to enable CSS.
  • Display HTML code: Click to turn this option OFF or ON to enable HTML code.
  • Vision Deficiencies: Click the drop-down arrow to select a vision deficiency. The page view adjusts accordingly.
    • None
    • Blurred Vision
    • Achromatopsia
    • Deuteranopia
    • Protanopia
    • Tritanopia.

Toolkit (tools icon)¶

This option includes highlighting tools that give information on the website structure and properties, as they relate to accessibility issues.

• Headings: Click to turn this option ON to investigate the header structure on the page.
• Links: Click to turn this option ON to examine the links on the webpage.

  • Click to toggle the Links button ON.

    

    A list of all links on the website opens.

    
  • Click on a link in the list to see the location on the website.

  • Hover the cursor over a link on the page for more information about it.

    
    • Link Text
    • Link Title
    • Link URL
    • Aria-label
    • Link Length
    • Link Target.
  • Click on a link on the page to see the link behavior as a user experiences it.

Open in Acquia Optimize: (box with an arrow-out icon)¶

Click to redirect to the statistics view for the current page in the application.

Settings (gear icon)¶

This option shows settings for users, extensions, cache, and general information for the current page.

• User Settings: Click to view the user settings:
  • Account: The name of the account.
  • Domains matching this URL: The domain name that matches the current URL.
  • Logout: Log out the user.
• Extension Settings:
  • Left vs. Right-aligned extension: Click to toggle this option Left or Right. This determines the side of the page that the extension toolbar is on.
  • Prevent highlighting elements with issues inside content-editable div element: Click to toggle this option OFF or ON.
  • Automatically disable site's CSS if selected issue's element is hidden: Click to toggle this option OFF or ON.
• Cache Settings: Click to expand this section.

  • Clear Cache: Click to clear the cache for the current page.

    Note

    This clears the HTML source code cache for the page, not the overlay from the web browser extension on the page.

  • Clear extension cache: click to clear the web browser extension cache. When you clear the cache, a popup message indicates that the action was successful.
• Information: Click to expand this section.
  • Version: The current version of the web browser extension.
  • Logged in as: The username for the user that is currently logged in.
  • Page: The URL for the current page.
  • Domain: The Domain name for the current page.
  • Create Support Log: Click to create a support log. The log saves to Downloaded Files on the current device. Use this file if you encounter an issue with Acquia Optimize and need to attach it to a support ticket.

Close (X icon)¶

Click to close the toolbar.

Document Tracking¶

The file extensions need to be entered, to match the files that will be scanned. If the file extension is not in the pre-loaded list, click the + button and add it to the new row.

• Do not add a . (period) before the file extension
• Delete any file extensions that are not used.

User experience¶

Users who have the web browser extension toolbar installed can use the basic functionality on any external webpage. All options are not available. These are the basic functions that are available for anyone to use if they have the web browser extension installed:

• Not found: This message indicates that the page is not a part of the user's paid domain package.

• Single Page Scan: Click to start a single page scan on any external page that is not covered by the user's subscription.

  Note

  The extension shows the results of the scan, it does not perform the scan.

  For more information, see the user guide article:
  Single-page scan

• View Options (Eye icon): This button shows the viewing resolution and offers options to adjust the view for the current page.
• Toolkit (Tools icon): Click to open the toolkit. This option allows a user to investigate page header structure and easily locate links on the current page.
• Settings (Gear icon): Click to access basic page settings such as clear cache, extension placement on the page, and extension version. 
• Note

  When users clear the cache, a popup message indicates that the action was successful.

• Close (X icon): Click to close the extension.

Troubleshooting¶

1. Page Not Found error: You should be able to open the extension directly from a page. If this error appears, it is possible that you are not logged in to the extension. Click the tools icon on the bottom of the extension toolbar and enter the user login credentials.

   

Additional resources¶

For more information, browse the menu on the left for the user guide articles.