Skip to main content

Dutchie

Ecommerce Event Tracking with Dutchie iframe​

  1. Fill in the accountId and sourceId fields with your Surfside account ID and source ID respectively. These will be provided to you by your Surfside account manager.

  2. Add the code snippet below to the <head></head> section of your website website to enable web and ecommerce event tracking with Dutchie iframe.

<script>
  (function() {
    var surf = document.createElement('script');
    surf.setAttribute('src','//cdn.surfside.io/sdk/1.0.0/wave.js');
    surf.setAttribute('type','text/javascript');
    surf.setAttribute('id','surfside');
    surf.setAttribute('accountId','XXXXX');
    surf.setAttribute('sourceId','XXXXX');
    surf.setAttribute('platform','dutchie');
    var sync = document.createElement('img');
    sync.setAttribute('src','//edge.surfside.io/id/uid?');
    sync.setAttribute('height','1');
    sync.setAttribute('width','1');
    sync.setAttribute('display','none');
    document.head.appendChild(surf,sync);
    })();
</script>

Surfside Commerce Media (SCM) with Dutchie iframe​

Note: Please follow the steps below for each Dutchie iframe menu / location page you would like to enable SCM on.

  1. Locate the Dutchie iframe embed code for the menu page you would like to enable SCM on. It should look similar to the code snippet below:

    <script id="dutchie--embed__script" src="https://dutchie.com/api/v2/embedded-menu/123.js"></script>

  2. Note the 123 in the src attribute of the script tag. This is the dutchie retailer ID for the specific menu page.

  3. Create the iframe overlay code snippet, which seamlessly places the SCM ads for your iframe menu. Fill in the accountId, siteId (this is the same value as sourceId), storeId (the unique Dutchie retailer ID), headerPlacementId, and scrollPlacementId fields with the appropriate values provided by your Surfside Account Manager.

    Important: Make sure to also fill in the data-accountid and data-siteid attributes in the surf-retail-script script tag with the appropriate values.

    Note: The headerPlacementId and scrollPlacementId values will be the same for each Dutchie iframe menu page.

    <script>
      window.surfRetailOverrides = {
        accountId: 'XXXXX',
        channelId: 'bf9bc',
        siteId: 'XXXXX',
        platform: 'dutchie', 
        storeId: 'UNIQUE_STORE_ID', // Unique Dutchie retailer ID for the specific menu
        headerPlacementId: 'XXXXX',
        scrollPlacementId: 'XXXXX',
      };
    </script>
    <div id="surf-overlay-here"></div>
    <script src="//cdn.surfside.io/ads/1.0.0/renderers/overlay.js"></script>
    <script id="surf-retail-script" data-accountid='XXXXX' data-siteid='XXXXX' src="//cdn.surfside.io/ads/1.0.0/r.js"></script>

  4. Combine the iframe embed code and the SCM overlay code snippet to create the final code snippet for your Dutchie iframe menu page. Place the overlay code snippet directly below the Dutchie iframe embed code. Additionally, to ensure the SCM ads do not affect the Dutchie iframe style, add the SCM overlay style code directly above the overlay code snippet.

    Final code snippet:

    <!-- Surfside SCM Style -->
    <style>
      #surf-header-section.sticky {position: relative;}
      @media screen and (max-width: 992px) { #surf-header-section.sticky {position: relative;}}
    </style>

    <!-- Dutchie Menu Example Embed Script -->
    <script id="dutchie--embed__script" src="https://dutchie.com/api/v2/embedded-menu/123.js"></script>

    <!-- Begin Surfside Ads Code -->
    <script>
      window.surfRetailOverrides = {
        accountId: 'XXXXX',
        channelId: 'bf9bc',
        siteId: 'XXXXX',
        platform: 'dutchie', 
        storeId: 'UNIQUE_STORE_ID', // Unique Dutchie retailer ID for the specific menu
        headerPlacementId: 'XXXXX',
        scrollPlacementId: 'XXXXX',
      };
    </script>
    <div id="surf-overlay-here"></div>
    <script src="//cdn.surfside.io/ads/1.0.0/renderers/overlay.js"></script>
    <script id="surf-retail-script" data-accountid='XXXXX' data-siteid='XXXXX' src="//cdn.surfside.io/ads/1.0.0/r.js"></script>

  5. Replace the original Dutchie iframe embed code with the final code snippet that includes the SCM overlay code.

  6. Repeat the above steps for each Dutchie iframe menu page you would like to enable SCM on.

  7. Once the SCM overlay code snippet is added to your Dutchie iframe menu page, let your Surfside Account Manager know and the Surfside Team will handle the rest!