Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from this space and version 14.3

This example shows you how to implement product tracking for a site using shared code and the Frosmo data layer.

You collect the product data with shared code that uses a trigger that only fires on product pages. When a visitor navigates to a product page, the shared code executes, scrapes the product data from the page DOM, and uses the data layer to pass that data to the Frosmo back end.

...

Note

If you're trying out this example on a production site, but do not want the example to interfere with production content, use a workspace for creating the shared code and its trigger.

...

  1. In the Frosmo Control Panel, select Triggers.
  2. Click Create trigger.
  3. Define the trigger settings:

    • Name: Enter "When the DOM is ready on a product page".
    • Evaluation point: Select DOM ready. This is a natural evaluation point for this example, since you want the page DOM to be ready before you scrape product data from it.
    • Rules: Click Add new rule, click Page URL, and set the trigger rule:

      Divbox
      classfrosmo-rule-container

      Page query selector controller is exactly product.

      This means that the trigger fires if the URL of the current page contains the query parameter controller=product.


    Creating a trigger for product pagesImage RemovedCreating a trigger for product pagesImage Added

  4. When you're done, click Save.

...

  1. In the Frosmo Control Panel, select Setup > Shared code.
  2. Click Create shared code.
  3. Define the shared code settings:

    • Name: Enter "Track Productsproducts".
    • EvaluationTrigger: Click Select trigger, select the trigger you created for product pages, and click Select.

      Selecting the trigger for the shared codeImage RemovedSelect the trigger for the shared codeImage Added

    • Content: Enter the code that implements the product tracking. Use the following example code as a basis.

      The example code first checks whether the data layer is available on the page. If the data layer is available, the code scrapes the product data from the page and then sends the data to the Frosmo back end by calling dataLayer.push() with a product object.

      Code Block
      languagejs
      themeRDark
      collapsetrue
      /**
       * If the data layer is not available, throw an error, which stops the script from executing.
       * The error will show up in the error tracking UI of the Frosmo Control Panel.
       */
      if (!Array.isArray(window.dataLayer)) {
          throw new Error('Missing or invalid dataLayer object. Expected an array instead of "'
              + typeof window.dataLayer + '".');
      }
      
      /**
       * The data layer is available, so save the product data.
       */
      saveProductData();
      
      /**
       * Scrape the product data from the page DOM and then push the data to the data layer.
       * @returns {void}
       */
      function saveProductData() {
          var product;
          // Scrape the product data (ID, name, descriptiontype, price, and so on).
          // ...
      
          // Use the data layer to pass the product data to the Frosmo back end.
          // Note! The following code assumes that the product data has been scraped into
          // the "product" object variable.
          window.dataLayer.push({
              frosmo: {
              frosmoProductId: product.id,
          view: {
                      products: [{
                          /* Standard Optionalattributes */
                       frosmoProductCategory   id: product.category_nameid,
              frosmoProductDescription            brand: product.descriptionbrand,
                frosmoProductDiscountPrice          image: product.unitimage_sale_priceurl,
                      frosmoProductImage    name: product.image_urlname,
                       frosmoProductName   originalPrice: product.nameoriginal_unit_price,
              frosmoProductPrice            price: product.current_unit_price,
                          type: product.category,
                     frosmoProductUrl     url: product.url
                      }]
                  }
              }
          });
          easy.console.log('Product data saved.');
      }


      Note

      The code omits the details of scraping the product data, since these depend entirely on how the product page is built. The code also assumes that a specific set of product data fields is available on the product page. The set of data available on your site's product pages may be different.


    Creating the shared code for tracking productsImage RemovedCreating the shared code for tracking productsImage Added

  4. When you're done, click Create Save.
  5. Click Activate, and then click Activate to confirm.

...

  1. Go to the site.
  2. Enable console logging for Frosmo Core.
  3. Go to a product page. If the product data is successfully collected, the console displays the following messages:

    Testing the product trackingImage RemovedTesting the product trackingImage Added

    Info

    In the above screenshot, the first message comes from the console.log() call in the modification content, while the second messages message comes from Frosmo Core. Even if you omit manual console logging in the modification, you still get the second message.


  4. If you want more details on the data layer push, select the Network tab in the developer tools, and check the setProductData request to the Optimizer API. If the status is 200, the request completed successfully.

    Testing the product trackingImage RemovedTesting the product trackingImage Added

    Tip

    To show only Optimizer API requests, filter the requests list by "optimizer".


...