About VDX Testing Tool

This is Google Chrome extension API based tool. This helps to ensure accuracy in term of tracking pixel integration and assets optimization verification.
It saves Q.C time and helps to ensure things are fine and optimised as per the product specs and guidelines.

Follow below steps to install and use VTT

i) Open chrome://extensions in chrome.
ii) From top right corner, switch on 'Developer mode' button.



iii) Click on 'Load unpacked' and locate the extension files, which you have already downloaded from box link. Note: Never delete the extention files from your laptop.

After Installing the extension, choose inspect element from right click menu and open [ VDX Tester Tool ]

After launch, the tool will look like this -

The tool has several sub panels, know more about on each one below -

Video Quartile

This panel will check video quartile pixel firing of all videos, when they start running.

ImpLive Pixels

This panel will check user impLive pixel firing, on integration with the Ad unit.

clickLive Pixels

This panel will check CTA or clickLive pixel firing, on integration with the CTA buttons / links. The total number of implemented clickTags also can be seen.

Pixel Window

To open this panel, click on number count. This will open a pixel list window, which will have all the info of implemented clickLive and impLive pixels. Information in this window comes from designer-config.js (designer API.) Make a single click on unmarked the fired pixel and double click to unmark all pixels.

Compare pixel from ExpoTask

Enter ExpoTask ID and click on 'Compare with ExpoTask' button. In this way pixels given in ExpoTask and pixels mentioned in designer-config.js file can be compared to know the missing pixel information. This will inform, if any pixel gets mismatched.

 

Verify designer-config.js

On a certain level few things can be verified. The below shown Blue Button can be use to catch -

1. Wrong path of 'map_default.jpg' file,
2. Unnecessary left 'console.log' in the code of designer-config.js file.

 

Specific QC menu option

This option appears for specific kind of Ad units, which are having store locator like Walmart, Mazda etc.

Verify the appearance of dynamic elements (Rollback Button)

Install VS Code text editor. This is similar to notepad++. Also install Live Server plugin inside VS Code.
Follow the below steps to make all rollback button visible -

i) Open the dynamic product gallery in the ad unit.
ii) Go to tool's menu and click on 'Specific QC' option.
iii) Inside tool, Download the zip file by clicking on this icon -
iv) Extract the zip file, It is containing a folder which is having a .html and .json file.
v) Open the folder in VS Code from File Menu > Open Folder option.
vi) Locate the index.html file from VS Code's left panel and click on Go Live button at its bottom.

vii) It will open a page in browser. Click on click here link inside the open page and copy the URL from address bar.
Paste the copied URL in tool and click on Check button as shown below.

Note: You can map the downloaded json file from fiddler also.

 

Image File Size

This panel will check the files size of all used images in the Ad unit, which are bigger than the defined size limit. The size limit can be change as per choice, if needed.

Video File Size and Duration

This panel will check the files size of all videos, also it will tell the duration / length of video. It will highlight beyond specs heavy videos also, if found any.

 

Template Version and other Info

Version of muse template file and presence responsive element can be seen at the bottom.

 

Javascript Editor

Edit desiger-config.js file and see the impact by clicking on 'Refresh Ad Unit' button like below.

Extension Update Indication

It will help to keep the extension updated. If older version found then its icon will start rotating. On click of it new version can be downloaded to update.

 

 

.

.