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 8.0

...

To track products with shared code:

  1. Create a trigger that fires when a visitor navigates to a product page.
  2. Create and activate the shared code for tracking products.
  3. Test the product tracking.

Creating a trigger for product pages

...

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

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

      Selecting the trigger for the shared code

    • 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
      /**
       * 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, description, 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({
              frosmoProductId: product.id,
              /* Optional */
              frosmoProductCategory: product.category_name,
              frosmoProductDescription: product.description,
              frosmoProductDiscountPrice: product.unit_sale_price,
              frosmoProductImage: product.image_url,
              frosmoProductName: product.name,
              frosmoProductPrice: product.unit_price,
              frosmoProductUrl: product.url
          });
          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 products

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

...