Dot Tag Setup

Before you can begin creating a dynamic ad, you’ll need to set up a product catalog and implement a Dot tag on each page of your website.

Follow the steps outlined in this section to get started.

Basics

For starters, you’ll need to create a Dot tag.

However, if you have existing Dot tags created outside of Native & Search (for example, DSP) that appear in the UI and wish to use them, you need to import those tags into Native & Search by marking the Verified column in the UI as Yes.

A Dot tag enables you to pass the user signal to your campaign. You’ll also need to pass the user funnel information and product id per user event from your website. If you already have a Dot on your website, you simply need to update that Dot with an additional script in order to run a Dynamic Product Ad campaign.

Using Third-Party Tag Managers

If you already have an account with Google Tag Manager and are familiar the Google Tag Manager UI, you may want to take advantage of this tag manager to set up your Native & Search Dot tags for DPA. The steps to work with the Google Tag Manager are described in the Google Tag Manager Guide for Native & Search DPA Dot tags.

Similarly, if you already have an account with Signal and are familiar the Signal UI, you may want to take advantage of this tag manager to set up your Native & Search Dot tags for DPA. The steps are described in the Signal Tag Manager Guide for Native & Search DPA Dot tags.

Also, if you already have an account with Adobe Dynamic Tag Manager and are familiar the Adobe Tag Manager UI, you may want to take advantage of this tag manager to set up your Native & Search Dot tags for DPA. The steps are described in the Adobe Tag Manager Guide for Native & Search DPA Dot tags.

Finally, if you already have an account with Sizmek, you could use this tag manager to set up your Native & Search Dot tags for DPA. Steps are described in the Sizmek VersaTag Container Guide for Native & Search DPA Dot tags.

Find Your Dot Tag Code in Your Account

Follow these steps:

  1. In the Native & Search UI, click View Dot tag code from the pulldown menu list.
  2. You’ll be able to activate your Dot tag by placing the code snippet (which is JavaScript) on to all the pages of your website.

dot tag placement

Apply Two Scripts To Your Web Pages

For the next step in your setup, you’ll have apply two scripts – standard and dotq – to all the pages on your website that you’d like to track.

The standard script is the one displayed in the Native & Search UI, like the following example:


standard script

Use the entire Dot tag code without modification.

Important

As a best practice, copy-and-paste it into whatever page template or content management system you use to tag all your website pages. While you may place the tag anywhere on the webpage, it’s recommended that you paste it in the <head> section.

If you only wish to send events for certain pages, you’ll need to place the Dot tag only on those pages. This is often done with the help of a tag management platform, such as Ensighten or Google Tag Manager.

You’ll also need to add the dotq script to your web pages in order to pass the user action and the product id.

A dotq script looks like the example shown below, with the strings et, ea and product_id specified in the script. You can use this as a template for your own dynamic product ads.

<script type="application/javascript">
    window.dotq = window.dotq || [];
    window.dotq.push(
    {
     'projectId': '10000',
     'properties': {
       'pixelId': '654321',
       'qstrings': {
         'et': 'custom',
         'ea': 'insert the standard value',
         'product_id': 'product_id value',
       }
    } } );</script>

Values represented in the above code snippet are shown in the table:

Value Description
projectId You can find this value on your Dot page in your account.
pixelId Find this value on your Dot page in your account.
ea Represents the user interaction with your product.
productId Represents the product ID on your web page.

Important

Each page must have a separate product ID representing the product on that page.

Note

The et=custom parameter can’t be changed. Note also that for the ev value, the enum value has to be passed as a string for the JavaScript value comparison.

Example Use Case When a User Adds a Product to a Shopping Cart

The following example shows how you might use a custom event script to capture the event of a customer who is adding a $249 electronics item to their shopping cart:

<script type="application/javascript">
window.dotq = window.dotq || [];
window.dotq.push(
{
  'projectId': '10000',
  'properties': {
    'pixelId': '654321',
    'qstrings': {
      'et': 'custom',
      'ea': 'add to cart',
      'productId': '1234',
      'gv': '249.00'
    }
} } );</script>

For this particular use case, ensure that you observe the following:

  • The et parameter is required to be included and set to the value custom.
  • The values of projectId and pixelId must match those of the same parameters of the Dot tag included on the page.
  • The add to cart value must be in this format: AddToCart.
  • The product Id should match the value 1234 in your product catalog.

Fire a User Signal to Verify Your Dot Placement

If you want to verify if your dot is placed correctly, you can check if your pixel is firing on your web page with the following pattern in this example:

https://sp.analytics.yahoo.com/spp.pl?a=XXXXXXXX&.yp=YYYYYYYYY&ea=ViewProduct&product_id=BAK1064

The value of XXXXXX and YYYYYYY should match your own Dot on the Dot view page.

Install Chrome Extension to Validate Dot Tags

Native & Search now provides you with a Chrome extension that you can use to inspect, validate and troubleshoot Dot tags that you’ve instrumented on your website.

To install the Chrome extension, follow these steps:

  1. Click Yahoo Native & Search Dot Helper.

This takes you to the Developer Tools section of the Chrome Web Store where you can add the extension to your Chrome browser.

  1. Click the ADD TO CHROME button in the upper right corner to install the extension and add it to your Chrome browser.
add to chrome
  1. The Dot Tag Helper has been installed.
dot helper added

How It Works

Once you’ve installed Dot tags as part of your Dot instrumentation, this handy tool lets you verify if those tags are sending all the necessary parameters required by Dynamic Product Ads.

The tool performs a simple check on the required parameters, as shown below:

dot help main screen

The required parameters for DPA are:

  • Pixel ID (.yp)
  • Project ID (a)
  • Event action (ea): Note that the acceptable values are ViewProduct, AddToCart and Purchase.
  • Product ID (product_id)

If any of the required parameters are missing, the Dot Helper tool will display an error message data unavailable in red text for that parameter.

dot helper error

In addition to the required parameters, the extension also provides you with several other pieces of useful information:

  • URL: The full script URL, in case you wish to check and verify other parameters.
  • Load time: The time it takes for the pixel to load. This is valuable for understanding the pixel performance.

Note

Some websites send additional parameters through Dot: for example, gv (for transaction value), et (event type), el (event label), and so on. Since they are optional, the Dot Helper tool only displays these parameters when they exist. No error message is displayed if these parameters are not present.

Some common errors when performing Dot tag instrumentation include:

  • missing parameter values
  • incorrect spelling (for example, view_product rather than ViewProduct)
  • duplicate Dot tags on one page.

Important

If your e-commerce website installs more than 1 pixel for different campaigns, this instrumentation is acceptable. However, if the same pixel ID is fired multiple times on a single page, errors may occur.

Next Steps

Navigate to How to associate your Dot tag to a Product Catalog, which describes in detail how to associate your dot tag to your product catalog.