Troubleshooting Ad Implementation AdOps Guide – part II

The last time, we dived into some of the lesser-known browser features in order to help us troubleshoot the ad implementation. If you didn’t have a chance to read the first part, I encourage you to do so. You might find some useful tips down there.

As previously, examples in the guide below are based on Chrome version 94.0.4606.71. You can use other browsers as well, but keep in mind that not all features described below might be available.

Troubleshooting Ad Implementation – where to start when you detect an issue in ad setup?

Open Chrome browser developer console

Here is a handy shortcut to open the browser developer console:

• Command+Option+J (Mac)
• Control+Shift+J (Windows, Linux, Chrome OS)

If that doesn’t do the trick, you can look at other options here.

Simulating a mobile device

Chrome mobile device simulation allows you to see how your ads may behave on real mobile devices. To open the device toolbar, you can click on the icon on the top left corner of developer tools or use the keyboard shortcut:

• Command+Option+M (Mac)
• Control+Shift+M (Windows, Linux, Chrome OS)

Chrome mobile device simulation allows you to see how your ads may behave on real mobile devices. To open Once you are in the mobile device simulation, you can adjust a couple settings to replicate user experience like resize the simulation window to whatever dimensions you need either by specifying values, using handles in responsive mode or even use one of the predefined.

Chrome mobile device simulation allows you to see how your ads may behave on real mobile devices. To open Once you are in the mobile device simulation, you can adjust a couple settings to replicate user experience like resize the simulation window to whatever dimensions you need either by specifying values, using handles in responsive mode or even use one of the predefined values for common devices. With the use of , you can switch between portrait and landscape mode.

Also, you will be able to adjust the page view using media queries that are specified on a given page. This is especially useful when you need to build responsive ad units and you want to know how media query breakpoints are affecting your ad slot behaviour; and at the same time you do not need to contact your developer team or dig too much into code, just click on media query to automatically adjust the view. You need to be in “responsive” mode in order to be able to switch between media queries.

Throttling the network

Another quite useful feature is network throttling, especially when most of your traffic comes from mobile devices. It allows you to simulate different internet connections. Chrome gives you some most common internet connections available nowadays but even if predefined settings do not satisfy you, Chrome gives you the option to set custom settings for the internet connection.

Throttling settings will affect after page reload. Just remember to revert this setting once you are done with your troubleshooting.

Local overrides

Personally, local override is my favourite feature of Chrome. It makes troubleshooting a lot easier because you are able to play around with the webpage code and make some changes locally on your machine even if you do not own the website and you do not have access to the unminified code base. When you make changes on the file in developer tools, developer tools saves a copy of the modified file to your local directory and next time you refresh the page with overrides enabled developer tools will serve your local copy of the file. How cool is that? For AdOps it is exceptionally cool!

Imagine you are working on the implementation of a new feature or preparing a test, but you do not want to bother developers or you are not sure if something will help or not you can quickly apply a “fix” and immediately see the result.

To enable local overrides you need to navigate to the Sources panel and open the Overrides tab. Then Select folder for overrides and choose the directory on your computer where you want to save your changes. Allow developer tools read and write access to the directory (a pop-up will appear).

You are ready to start working on the files of your interest.

One way to save the file is to go to the Sources tab and choose Page; and then look for the file of your interest. Then click with the right mouse button and select Save for overrides from the menu (You can do so also through the Network tab).

I hope you have found those cool features useful and that they will help you in your day-to-day work!

Do you have any questions regarding Ads Implementation?
Feel free to contact us – our team will be more than happy to discuss it with you!

LET’S GET IN TOUCH!