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 6.0

...

  1. In the Control Panel, select Modifications > Placements.
  2. Click Create placement.
  3. Define the following settings:

    • Name: Enter a descriptive name, such as "Tracking - Product Page".
    • Target element: Select CSS selector, and enter "body" as the selector name.
    • Display method: Select Before content.
    • URL matcher: Click Add new rule. Since only the product page URL contains the query parameter controller=product, define the following rule: "Page query selector controller is exactly product". This means that the placement is valid for the page only when the page URL contains the query key "controller" with the value "product".

      For more information about the URL matcher, see Creating placementsand editing a placement.

    The target element, display method, and URL matcher together place the modification as the first child element of the body element on a product page. Since the modification does not add any visible content to the page, the location of the modification doesn't really matter.

  4. Click Save.

...

For more information about placement settings, see Creating placementsand editing a placement.

Creating the product tracking modification

...

  1. In the Control Panel, select Modifications > Placements.
  2. Click Create placement.
  3. Define the following settings:

    • Name: Enter a descriptive name, such as "Tracking - Order Confirmation Page".
    • Target element: Select CSS selector, and enter "body" as the selector name.
    • Display method: Select Before content.
    • URL matcher: Click Add new rule. Since only the order confirmation page URL contains the query parameter controller=confirmation, define the following rule: "Page query selector controller is exactly confirmation". This means that the placement is valid for the page only when the page URL contains the query key "controller" with the value "conformation".

      For more information about the URL matcher, see Creating placementsand editing a placement.

    The target element, display method, and URL matcher together place the modification as the first child element of the body element on the order confirmation page. Since the modification does not add any visible content to the page, the location of the modification doesn't really matter.

  4. Click Save.

...

For more information about placement settings, see Creating placementsand editing a placement.

Creating the transaction tracking modification

...

  1. In the Control Panel, select Modifications > Overview.
  2. Click Create modification.
  3. Enter a descriptive name for the modification, such as "Track Purchases", select Basic as the modification type, and deselect Enable comparison group.

    Creating the transaction tracking modification

    Info

    The comparison group is a useful feature for production modifications, so do not disable it by default. Here, the comparison group is disabled to keep the example as simple as possible. For more information about the comparison group, see Default configuration and data tracking for a visitor.


  4. Click Create modification.
  5. Create the modification content:

    1. Select Content.
    2. Expand variation 1.
    3. In the content field, enter the code that implements the transaction 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 transaction data from the page and then sends the data to the Frosmo back end by calling dataLayer.push() with a transaction object.

      Code Block
      languagejs
      themeRDark
      <script>
          /**
           * If the data layer is available, save the transaction data.
           */
          if (window.dataLayer) {
              saveTransactionData();
          }
      
          /**
           * Scrape the transaction data from the page DOM and then push the data to the data layer.
           * @returns {void}
           */
          function saveTransactionData() {
              // Scrape the transaction data.
              // For example, let's assume the data is available in a global "window.transaction"
              // object. The "window.transaction.id" property contains the transaction ID, while
              // the "window.transaction.products" property contains the product data as an array
              // of objects, with each object describing a single purchased product.
      
              // Map the purchased products to an array of transaction product objects for the data layer.
              var products = window.transaction.products.map(function (product) {
                  return {
                      id: product.id,
                      name: product.name,
                      price: product.price,
                      quantity: product.quantity
                  };
              });
      
              // Use the data layer to pass the transaction data to the Frosmo back end.
              window.dataLayer.push({
                  transactionId: window.transaction.id,
                  transactionProducts: products
              });
              console.log('Transaction data saved.');
          }
      </script>


      Note

      The code assumes that the order confirmation page provides a global object that conveniently contains the transaction data required for the data layer call. Getting that same data on your site may require a completely different approach, especially if the data is not available on the order confirmation page. For example, depending on how your site is implemented, you may need to store the data at an earlier point in the purchase funnel, and then retrieve the data for the data layer push on the order confirmation page.


    4. Click Activate for variation 1.
    5. Click Save all.

    Creating the transaction tracking modification

  6. Define the display options for the modification:

    1. Select Display options.
    2. Click Select placement.
    3. In the Placement field, select the transaction tracking Select the placement you created created above, and click Select.
    4. Click Save.

  7. Disable basic conversion tracking for the modification:

    1. Select Analytics.
    2. At the bottom of the page, deselect Enable display and click conversion tracking for this modification.

    Since the modification is used purely for collecting data, and since the modification displays no content that visitors can view or click, you do not want to attribute conversions to the modification based on the clicks, displays, and true displays it receives. For more information about conversions and modifications, see Introduction to conversion tracking.

  8. Click Activate for the modification.

...