Some people may have customized remarketing tags and conversion tags based on information from this blog and various media. When doing such customization, I think that the problem that always occurs is that the tags are not set correctly as a result of customization . If you customize it, even if you want to borrow the help of official support, it will be difficult to get support as you want.
This article presents the most reliable way to check that your tags are working correctly when you customize them. Regardless of whether it is via a tag manager or written directly in the HTML file, this method can be checked in a unified manner. Also, even if the tag manager debug tool shows that it has been successfully delivered, it may not actually be delivered. Check it out the way it’s written.
What are Chrome Developer Tools
Chrome developer tools are one of the features in Google Chrome, and are very powerful tools for web developers to make their work more efficient. Using Chrome developer tools,
- Temporarily rewrite the contents of the page on the browser
- You can check how various data are downloaded and how many seconds each takes
- You can pause running JavaScript and check its internal state
It is used by many web developers because it can dramatically improve the efficiency of web production with functions such as.
Although it is a function for web developers, even web ad operators can use Chrome developer tools to check with higher accuracy whether remarketing tags and conversion tags are working properly. Become.
Basic usage of Chrome developer tools
To open Chrome developer tools
To open the Chrome developer tools, simply open the website to be checked in Google Chrome and press the “F12” key. This will open the Chrome developer tools like the captcha below at the bottom of your browser or in a separate window.
Role of each tab
The Chrome developer tools window has 8 tabs by default. Here is a brief description of the role of each tab.
| tab name | role |
|---|---|
| Elements | Display the HTML tag structure on the tree. It is also possible to edit directly on the screen. |
| Network | You can view resource data such as loaded HTML, images, and JavaScript in a list, and see how long it took to load each. |
| sources | You can check the content of all the HTML, JavaScript, and CSS used to display the page.You can also edit it directly on the screen. |
| timeline | A function for measuring UI (user interface) performance and finding points for tuning. |
| Profile | A function to collect and check the details of CPU and memory information. It is used to find points for performance measurement and tuning on sites that consume a lot of CPU and memory. |
| Resources | You can see the contents of cookies, LocalStorage, SessionStorage, etc. saved on the browser. |
| Audits | A feature that provides recommendations for optimizing web pages. |
| Console | JavaScript can be easily executed. |
How to test tags using Chrome developer tools
The tab you need to see the tag in action is the Network tab. By making full use of this Network function, you can improve the accuracy of checking the operation of remarketing tags and conversion tags.
About tag testing
Tags such as remarketing tags, conversion tags, and Google Analytics are written to make some kind of call to the publisher’s server, such as Google.
In the Network tab you can see information about calling/downloading the resource files needed to render the open page. So you can use the Network tab to check whether calls to the server are successful.
How to read the Network tab
List view
In the list view, all the data loaded to display the page is displayed (if nothing is displayed or less than expected, keep the developer tools open and reload the page) please look).
- List of read file names
- Search window for filtering loaded file names
There is a lot of other important information in this list view for web development, but for testing tags, it’s okay if you know 1 and 2 above first.
Detail view
From the list view, clicking any row will take you to the detail view where you can see detailed information about loading that file.
- URL to load
- Cookie data you are sending
- List of parameters given when sending
When checking, filter by the tag you are interested in, then use this detailed view to make sure the parameters such as id given by the medium are present in 1 or 3.
Filter per medium
Here are the strings that you should put in the filter to get to the detailed view of each tag for each medium. Depending on how the site is made, filtering with this string may not narrow it down to one, but the number should decrease, so I think it’s possible to look at the URLs one by one. .
| Tag type | a string that can be used as a filter |
|---|---|
| Google Analytics (Universal) | collect |
| Google Analytics (non-universal, asynchronous) | utm |
| Google AdWords Remarketing Tag | user list |
| Google AdWords conversion tag | www.google.co.jp/ads/conversion/ |
| Yahoo! Sponsored Search Conversion Tag | b91.yahoo.co.jp/pagead/conversion.js |
| Yahoo! Display Network Remarketing Tag | b92.yahoo.co.jp/search |
| Yahoo! Display Network Conversion Tag | yahoo ydn conv_io |
| Facebook remarketing tag | www.facebook.com/tr |
| Facebook conversion tag | www.facebook.com/tr |
summary
If you are using a tag manager, you can basically check with the debugging tool on the tag manager, but in cases where you are not using a tag manager, or as a result of advanced customization, it will not work properly. It is good to use this method to check the operation when you want to check if the tag manager is debugging or when you have doubts about the result of tag manager debugging.
