Overview

Shopify integration consists of two parts:

App installation

Shopify app automatically syncs your Shopify store's data to Intempt, allowing you to use your historical order and customer data to further acquire, retain, and monetize your customers.

The initialized Shopify source will automatically collect the following events:

  • Order placed/updated. These activities are generated as the order status progresses between statuses.
  • Customer created/updated. New customers are created via Shopify or their properties are updated.
  • Checkout abandoned. The abandoned checkout activity is generated by Shopify based on a customer starting a checkout and not completing an order after 90 minutes. They may still complete an order after 90 minutes so it is important to use this activity in conjunction with the Place order activity to determine if a recent checkout is still in an abandoned state.

Web tracking installation

While the Shopify app is useful for getting historical data, it does not allow getting real-time data on custom user actions for advanced analytics, targeting, and personalization use cases. Only when leveraging both app and web data sources can you get the full power of the GrowthOS engagement and targeting engine.

To do that, you need to set up a Javascript tracker to collect web-based events.

We have prepared an event tracking script template to speed up your integration (see the code snippet in the "Web tracking installation" section).

You can review the out-of-the-box events here.

App installation

Create a custom app in your Shopify store

Before creating a Shopify source within Intempt, you must create an app in your Shopify store.

First, sign in to your Shopify store (you need to have admin rights). Locate and click the Settings tab and click on it.




In the Settings click Apps and sales channels tab.




In the Apps and sales channels tab click and locate the Develops apps for your store button.




Click the Create an app button.




A window will appear where you need to specify:

  • App name - Intempt
  • App developer - email address of the app creator



Go to the App development tab, where you can find your newly created app (in this case - Intempt). Click on the app, and you will enter the app configuration window.




Click and locate the Configure tab (highlighted in red), where you will be able to set up the Admin API integration.




In the Configuration tab, locate the Admin API integration line. On the line click Configure. In the Admin API access scopes window grant the following permissions/




Additionally, you, as an app creator, can add extra access to your app. For Webhook subscriptions, select 2022-07 (Latest).




Click Save.




Click Install app.




On the created Intempt app, in Shopify, go to API credentials tab and copy the following (you will need this to set up the integration with Intempt):

  • Admin API access token

NOTE: you can view the token only once. In order to view it again, uninstall the app and reinstall it once again.


Create a Shopify source

Go to Sources and select "Create source" -> Shopify option.



Enter your shop API key and Shop URL and click the Connect Shopify button.




Once the integration has been successful, you will be notified with a checkmark icon.


Once connected, as a final step, configure the syncing intervals with the source.



By default, Intempt will sync all data available in your store. However, you can also select a custom sync time if you don't want to ingest all of the historical data.

Sync interval means how frequently Intempt will sync the data from your Shopify store. The default and recommended timeframe is 1 hour.

Once the source is created, you can always update the sync schedule and frequency in the overview tab.

Web tracking installation

Create a Web tracker source

Under the "Sources" page, select the "Create source" button and then the "Web tracker" option.


Under “Installation,” copy the code block snippet containing the script tags and Javascript function.

Create the API key

Refer to API keys to create unique API keys that you can use in your project to authenticate SDK access.

🚧

Don't miss out!

Remember to replace "YOUR_API_KEY" with the API key you generated via API keys section.

Initialize the SDK

Paste the snippet in the tag section of your website. This should be an HTML page that acts as a base or template page (with other scripts your page loads) to ensure all possible events are captured.

Add the event tracking script template

Under the Snippets folder, add a new file named ‘js-intempt-tracking’. Paste Intempt generated tracking code there.

<script>
  document.addEventListener("DOMContentLoaded", () => {
    
  {% comment %} Login {% endcomment %}
  {% if template contains 'login' %}
    const loginBtn = document.querySelector(`form[action="/account/login"] input[type="submit"]`);
    if (loginBtn) {
      loginBtn.addEventListener("click", () => {
        const email = document.querySelector('input[name="customer[email]"]').value.toString();
        const password = document.querySelector('input[name="customer[password]"]').value.toString();
        if (email && password) {
          intempt.recordEvent('login', {
            email: email
          });
        }
      }, false);
    }
  {% endif %}
  {% comment %} Login - End {% endcomment %}

  {% comment %} Sign up {% endcomment %}
  {% if template contains 'register' %}
    const loginBtn = document.querySelector(`form[action="/account/"] input[type="submit"]`);
    if (loginBtn) {
      loginBtn.addEventListener("click", () => {
        const firstName = document.querySelector('input[name="customer[first_name]"]').value.toString();
        const lastName = document.querySelector('input[name="customer[last_name]"]').value.toString();
        const email = document.querySelector('input[name="customer[email]"]').value.toString();
        const password = document.querySelector('input[name="customer[password]"]').value.toString();
        if (firstName && lastName && email && password) {
          intempt.recordEvent('signed_up', {
            first_name: firstName,
            last_name: lastName,
            email: email 
          });
        }
      }, false);
    }
  {% endif %}
  {% comment %} Sign up - End {% endcomment %}

  {% comment %} Viewed product {% endcomment %}
  {% if template contains 'product' %}
    intempt.recordEvent('viewed_product', {
      product_id: `{{ product.id }}`, 
      sku: `{{ product.variants[0].sku | escape }}`, 
      title: `{{ product.title | escape }}`,
      price: {{ product.price | divided_by: 100.0 }},
      category: `{{ product.collections[0].title }}`,
      variant: `{{ product.variants[0].title }}`,
      discount: {% if product.compare_at_price > product.price %}{{ product.compare_at_price | minus: product.price | divided_by: 100.0 }}{% else %}0{% endif %},
      url: `https://{{ shop.domain }}{{ product.url }}`,
      image_url:  `https:{{ product.featured_image | img_url: 'master' }}`
    });
  {% endif %}
  {% comment %} Viewed product - End {% endcomment %}

  {% comment %} Viewed category {% endcomment %}
  {% if template contains 'collection' %}
    intempt.recordEvent('viewed_category', {
      category_name: `{{ collection.title }}`,
      url: `https://{{ shop.domain }}{{ collection.url }}`
    });
  {% endif %}
  {% comment %} Viewed category - End {% endcomment %}

  {% comment %} Added to cart {% endcomment %}
  {% if template contains 'product' %}
    var variantsJson = {{ product | json }};
    const addtocartForm = document.querySelector(`form[action="/cart/add"]`);
      if (addtocartForm) {
        addtocartForm.addEventListener("submit", (e) => {
          e.preventDefault();
          
          let variantId = document.querySelector(`form[action="/cart/add"] [name="id"]`).value;
          let quantity = 1;
          if (document.querySelector(`form[action="/cart/add"] [name="quantity"]`)) {
            quantity = document.querySelector(`form[action="/cart/add"] [name="quantity"]`).value;
          }
          let sku = '';
          let price = 0;
          let discount = 0;
          let variant = '';
          for (let i = 0; i < variantsJson.variants.length; i ++) {
            if (variantsJson.variants[i].id == variantId) {
              sku = variantsJson.variants[i].sku;
              price = parseFloat(variantsJson.variants[i].price) / 100.0;
              variant = variantsJson.variants[i].title;
              if (variantsJson.variants[i].compare_at_price != null && variantsJson.variants[i].compare_at_price > variantsJson.variants[i].price) {
                discount = parseFloat(variantsJson.variants[i].compare_at_price - variantsJson.variants[i].price) / 100.0;
              }
            }
          }
          intempt.recordEvent('added_to_cart', {
            product_id: `{{ product.id }}`,
            sku: sku,
            title: `{{ product.title }}`,
            price: price,
            category: `{{ product.collections[0].title }}`,
            variant: variant,
            discount: discount,
            url: `https://{{ shop.domain }}{{ product.url }}`,
            image_url: `https:{{ product.featured_image | img_url: 'master' }}`,
            item_count: quantity,
            product_url: `https://{{ shop.domain }}{{ product.url }}?variant=` + variantId.toString()
          });

          e.target.submit();
        }, false);
      }
  {% endif %}
  {% comment %} Added to cart - End {% endcomment %}

  {% comment %} Viewed checkout {% endcomment %}
  {% if template contains 'cart' %}
    intempt.recordEvent('viewed_checkout', {
      total_price: {{ cart.total_price | divided_by: 100.0 }},
      total_discount: {% if cart.total_discounts %}{{ cart.total_discounts }}{% else %}0{% endif %},
      items_count: {{ cart.item_count }},
      items: [
        {% for item in cart.items %}
          {
            title: `{{ item.product.title }}`,
            product_id: `{{ item.product.id }}`,
            sku: `{{ item.variant.sku }}`,
            price: {{ item.price | divided_by: 100.0 }},
            category: `{{ item.product.collections[0].title }}`,
            variant: `{{ item.variant.title }}`,
            quantity: {{ item.quantity }},
            product_brand: `{{ item.product.vendor }}`,
            url: `https://{{ shop.domain }}{{ item.product.url }}`,
            image_url: `https:{{ item.product.featured_image | img_url: 'master' }}`
          }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ]
      {% comment %}
      title: [
        {% for item in cart.items %}`{{ item.product.title }}`{% unless forloop.last %},{% endunless %}{% endfor %}
      ],
      product_id: [
        {% for item in cart.items %}`{{ item.product.id }}`{% unless forloop.last %},{% endunless %}{% endfor %}
      ],
      sku: [
        {% for item in cart.items %}`{{ item.variant.sku }}`{% unless forloop.last %},{% endunless %}{% endfor %}
      ],
      price: [
        {% for item in cart.items %}{{ item.price }}{% unless forloop.last %},{% endunless %}{% endfor %}
      ],
      category: [
        {% for item in cart.items %}`{{ item.product.collections[0].title }}`{% unless forloop.last %},{% endunless %}{% endfor %}
      ],
      variant: [
        {% for item in cart.items %}`{{ item.variant.title }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
      ],
      quantity: [
        {% for item in cart.items %}{{ item.quantity }}{% unless forloop.last %},{% endunless %}{% endfor %}        
      ],
      product_brand: [
        {% for item in cart.items %}`{{ item.product.vendor }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
      ],
      url: [
        {% for item in cart.items %}`{{ shop.domain }}{{ item.product.url }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
      ],
      image_url: [
        {% for item in cart.items %}`{{ item.product.featured_image | img_url: 'master' }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
      ]
      {% endcomment %}
    });
  {% endif %}
  {% comment %} Viewed checkout - End {% endcomment %}

  {% comment %} Item removed from cart {% endcomment %}
  {% if template contains 'cart' %}
    const removeBtns = document.querySelectorAll(`a[href^="/cart/change"]`);
    {% assign itemsJson = '[' %}
    {% for item in cart.items %}
      {% assign itemCategory = '"category": "' | append: item.product.collections[0].title | append: '","id"' %}
      {% assign itemJson = item | json | replace: '"id"', itemCategory %}
      {% assign itemsJson = itemsJson | append: ',' | append: itemJson %}
    {% endfor %}
    {% assign itemsJson = itemsJson | replace: '[,', '[' | append: ']' %}
    var itemsJson = {{ itemsJson }};
    console.log(itemsJson);
    for (let i = 0; i < removeBtns.length; i ++) {
      const removeBtn = removeBtns[i];
      removeBtn.addEventListener("click", (e) => {
        e.preventDefault();
        
        const lineId = e.target.getAttribute('href').split('line=')[1].split('&')[0] - 1;
        intempt.recordEvent('item_removed_from_cart', {
          title: itemsJson[lineId].title,
          product_id: itemsJson[lineId].id.toString(),
          sku: itemsJson[lineId].sku,
          price: itemsJson[lineId].price / 100.0,
          category: itemsJson[lineId].category,
          variant: itemsJson[lineId].variant_title,
          quantity: itemsJson[lineId].quantity,
          product_brand: itemsJson[lineId].vendor,
          url: `https://{{ shop.domain }}` + itemsJson[lineId].url,
          image_url: `https:` + itemsJson[lineId].image
        });
        
        window.location.href = e.target.getAttribute('href');
      }, false);
    }
  {% endif %}
  {% comment %} Item removed from cart - End {% endcomment %}

  {% comment %} Search {% endcomment %}
  const searchForms = document.querySelectorAll(`form[action="/search"]`);
  for (let i = 0; i < searchForms.length; i ++) {
    const searchForm = searchForms[i];
    searchForm.addEventListener("submit", (e) => {
      e.preventDefault();

      const term = e.target.querySelector('[name="q"]').value;
      intempt.recordEvent('search', {
        search_term: term,
        url: window.location.href
      });
      
      e.target.submit();
    }, false);
  }
  {% comment %} Search - End {% endcomment %}

  {% comment %} Started checkout {% endcomment %}
  {% if template contains 'cart' %}
    const checkoutBtn = document.querySelector(`form[action="/cart"] input[type="submit"][name="checkout"]`);
    checkoutBtn.addEventListener("click", (e) => {
      e.preventDefault();
      
      intempt.recordEvent('started_checkout', {
        total_price: {{ cart.total_price | divided_by: 100.0 }},
        total_discount: {% if cart.total_discounts %}{{ cart.total_discounts | divided_by: 100.0 }}{% else %}0{% endif %},
        items_count: {{ cart.item_count }},
        items: [
          {% for item in cart.items %}
            {
              title: `{{ item.product.title }}`,
              product_id: `{{ item.product.id }}`,
              sku: `{{ item.variant.sku }}`,
              price: {{ item.price | divided_by: 100.0 }},
              category: `{{ item.product.collections[0].title }}`,
              product_variant: `{{ item.variant.title }}`,
              quantity: {{ item.quantity }},
              product_brand: `{{ item.product.vendor }}`,
              url: `https://{{ shop.domain }}{{ item.product.url }}`,
              image_url: `https:{{ item.product.featured_image | img_url: 'master' }}`
            }{% unless forloop.last %},{% endunless %}
          {% endfor %}
        ]
        {% comment %}
        title: [
          {% for item in cart.items %}`{{ item.product.title }}`{% unless forloop.last %},{% endunless %}{% endfor %}
        ],
        product_id: [
          {% for item in cart.items %}`{{ item.product.id }}`{% unless forloop.last %},{% endunless %}{% endfor %}
        ],
        sku: [
          {% for item in cart.items %}`{{ item.variant.sku }}`{% unless forloop.last %},{% endunless %}{% endfor %}
        ],
        price: [
          {% for item in cart.items %}{{ item.price }}{% unless forloop.last %},{% endunless %}{% endfor %}
        ],
        category: [
          {% for item in cart.items %}`{{ item.product.collections[0].title }}`{% unless forloop.last %},{% endunless %}{% endfor %}
        ],
        variant: [
          {% for item in cart.items %}`{{ item.variant.title }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
        ],
        quantity: [
          {% for item in cart.items %}{{ item.quantity }}{% unless forloop.last %},{% endunless %}{% endfor %}        
        ],
        product_brand: [
          {% for item in cart.items %}`{{ item.product.vendor }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
        ],
        url: [
          {% for item in cart.items %}`{{ shop.domain }}{{ item.product.url }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
        ],
        image_url: [
          {% for item in cart.items %}`{{ item.product.featured_image | img_url: 'master' }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
        ]
        {% endcomment %}
      });
      
      window.location.href = '/checkout';
    }, false);
  {% endif %}
  {% comment %} Started checkout - End {% endcomment %}
  });
</script>
{% comment %}
<script>
  document.addEventListener("DOMContentLoaded", () => {
    
  {% comment %} Purchase {% endcomment %}
  {% if first_time_accessed %}
    intempt.recordEvent('purchase', {
      total_price: {{ checkout.total_price | divided_by: 100.0 }},
      shipping_cost: {{ checkout.shipping_price | divided_by: 100.0 }},
      tax: {{ checkout.tax_price | divided_by: 100.0 }},
      shipping_method: `{{ checkout.shipping_methods[0].title }}`,
      payment_method: `{{ checkout.transactions[0].gateway_display_name }}`,
      discount_code: `{% if checkout.discount_applications %}{{ checkout.discount_applications[0].title }}{% endif %}`,
      accepts_marketing: {{ checkout.customer.accepts_marketing }},
      shipping_address: `{{ checkout.shipping_address.summary }}`,
      country: `{{ checkout.shipping_address.country }}`,
      state: `{{ checkout.shipping_address.province }}`,
      email: `{{ checkout.customer.email }}`,
      first_name: `{{ checkout.customer.first_name }}`,
      last_name: `{{ checkout.customer.last_name }}`,
      total_discount: {{ checkout.total_discounts | divided_by: 100.0 }},
      items_count: {{ checkout.item_count }},
      items: [
        {% for item in checkout.line_items %}
          {
            title: `{{ item.product.title }}`,
            product_id: `{{ item.product.id }}`,
            sku: `{{ item.variant.sku }}`,
            price: {{ item.price | divided_by: 100.0 }},
            category: `{{ item.product.collections[0].title }}`,
            product_variant: `{{ item.variant.title }}`,
            quantity: {{ item.quantity }},
            product_brand: `{{ item.product.vendor }}`,
            url: `https://{{ shop.domain }}{{ item.product.url }}`,
            image_url: `https:{{ item.product.featured_image | img_url: 'master' }}`
          }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ]
      {% comment %}
      title: [
        {% for item in checkout.line_items %}`{{ item.product.title }}`{% unless forloop.last %},{% endunless %}{% endfor %}
      ],
      product_id: [
        {% for item in checkout.line_items %}`{{ item.product.id }}`{% unless forloop.last %},{% endunless %}{% endfor %}
      ],
      sku: [
        {% for item in checkout.line_items %}`{{ item.variant.sku }}`{% unless forloop.last %},{% endunless %}{% endfor %}
      ],
      price: [
        {% for item in checkout.line_items %}{{ item.price }}{% unless forloop.last %},{% endunless %}{% endfor %}
      ],
      category: [
        {% for item in checkout.line_items %}`{{ item.product.collections[0].title }}`{% unless forloop.last %},{% endunless %}{% endfor %}
      ],
      product_variant: [
        {% for item in checkout.line_items %}`{{ item.variant.title }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
      ],
      quantity: [
        {% for item in checkout.line_items %}{{ item.quantity }}{% unless forloop.last %},{% endunless %}{% endfor %}        
      ],
      product_brand: [
        {% for item in checkout.line_items %}`{{ item.product.vendor }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
      ],
      url: [
        {% for item in checkout.line_items %}`{{ shop.domain }}{{ item.product.url }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
      ],
      image_url: [
        {% for item in checkout.line_items %}`{{ item.product.featured_image | img_url: 'master' }}`{% unless forloop.last %},{% endunless %}{% endfor %}        
      ]
      {% endcomment %}
    });
  {% endif %}
  {% comment %} Purchase - End {% endcomment %}
  
  });
</script>
{% endcomment %}

Open theme.liquid again and add this code {% render ‘js-intempt-tracking’ %} before tag.

Go to Admin/Settings/Checkout and paste the Intempt main Order Status Page section.

After that, open the ‘js-intempt-tracking.liquid’ and scroll down to the bottom. You will see a purchase tracking script that is inside the {% comment %} tag. Copy this script and paste it to the order status page section. Make sure you copy the entire

Track custom events

If the provided events are insufficient, you can follow these steps to track custom events on your Shopify store.

  1. Determine which page you’re working on and add tracking code inside {% if the template contains ‘xxx’ %}{% endif %} statement. Thank you page scripts should not go under theme files, they should be in order status page scripts
  2. If you’re adding a custom script on a cart page, you must put your scripts under {% if the template contains ‘cart’ %} so it can run on the cart page only.
  1. Determine what data you will track and create custom events on Intempt to sync data correctly. Refer to Javascript SDKfor a complete guide on creating custom events and verifying if they are tracked correctly.