Page History

...

For the purpose of this example, a product page is identified by the query parameter parameter controller=product in in the page URL.

...

1. In the Frosmo Control Panel, in the sidebar, select More > Triggers.
2. Click Create trigger.

3. Define the following settings:

   • Name: Enter 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, select Page URL, and set the following rule:

     Divbox
     class frosmo-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 parameter controller=product.

     
     

   

4. Click Save.

...

For more information about trigger settings, see see Creating and editing a trigger.

...

1. In the Control Panel, in the sidebar, select More > Shared Code.
2. Click Create shared code.

3. Define the following settings:

   • Name: Enter "Track products".

   • Trigger: Click Select trigger, select the trigger you created for product pages, and click Select.

     

   • Minified: Leave this to Enabled.

   • 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
     language js theme RDark collapse true
     /** * 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, type, 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. dataLayer.push({ frosmo: { view: { products: [{ /* Standard attributes */ id: product.id, brand: product.brand, image: product.image_url, name: product.name,        originalPriceoriginalPrice: product.original_unit_price, price: product.current_unit_price,       type: product.category,        urlurl: 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.

     
     

   

4. Click Save.
5. Click Activate, and then click Activate to confirm.

You have created and activated the shared code.  Products Products are now tracked on the site.

...