Article sections

    Requirements:

    Reveal account installed on Shopify (https://help.omniconvert.com/kba/how-to-integrate-reveal-with-shopify-for-new-reveal-users/ or https://help.omniconvert.com/kba/how-to-integrate-reveal-with-shopify-for-existing-reveal-users/)

    Explore Account

    In order to use the NPS feature automatically, you need to integrate your Reveal account with Omniconvert Explore .
    Once an order is placed, Omniconvert Explore will display the Survey on the transaction’s thank you page, and collect the feedback.

    The insights will be automatically sent to Reveal and you will be able to assess customer experience and find out how likely it is that your customers would recommend your products / services to a friend or colleague.

    Integration between Reveal and Explore

    Step 1. Log into your Explore account and go to Website menu > Integrations:

    Step 2. Copy the connection string for the Reveal integration from the Integrations page by clicking on the “Copy Code” button:

    Step 3. Log into your Reveal account and go to Store settings > Integrations > Omniconvert Explore Settings > Pencil button to configure:

    Step 4. Paste the previously copied connection string in the Connection String field and save your settings by clicking on the “Connect” button:

    Step 5. A successful confirmation message will appear on the screen:

    With the connection made, Reveal automatically created the Pre-Delivery NPS in Explore. In order to make sure the NPS survey is shown in your Shopify website please make sure to follow the steps below.

    Adding Explore to Shopify

    In this part you will find out how to add Explore to Shopify in manner that will enable Explore to register the purchases that are made by the customers in a Shopify store.

    1. General tracking code

    1. Go to “Sales channels” > “Online Store” > “Themes”
    2. Click on the three dots next to “Customize” and select “Edit Code”
    1. Choose theme.liquid file and in this page you must insert the Omniconvert code immediately after opening the <head> tag. 

    Example:

    Get the general Tracking Code from the Omniconvert Dashboard, by clicking on your website’s name in the top menu, and selecting “Tracking code settings”:

    2. Conversion tracking code on the “Thank you” page

    For the next step, you have to go “Settings -> Checkout” and insert the following 2 blocks of code in the Additional scripts section, one after the other:

    General tracking code

    <!-- start Omniconvert.com code -->
    <link rel="dns-prefetch" href="//app.omniconvert.com" />
    <script type="text/javascript">window._mktz=window._mktz||[];</script>
    <script src="//cdn.omniconvert.com/js/{YOUR_ID}.js"></script>
    <!-- end Omniconvert.com code -->

    The first block is the same Omniconvert general code you inserted at the beginning of the article. It is necessary to insert it again here, since the payments in Shopify are made on a different domain, that has a different template.

    If you don’t use the code from the Dashboard and you choose to use the code in the example above don’t forget to replace {YOUR_ID} with your website’s unique identifier.

    The conversion tracking code

    {% if attributes.mktz_custom %} 
    <!-- start conversion goal --> 
    <script>     
        var _mktz = _mktz || [];     
        var mktzCustom = JSON.parse('{{ attributes.mktz_custom }}'.replace(/&quot;/g, '"'));     
        mktzCustom.transaction = '{{ checkout.id }}';
        mktzCustom.orderId = '{{ checkout.order_id }}'; 
        _mktz._Goal('sale', '{{ total_price | money_without_currency }}', mktzCustom); 
    </script> 
    <!-- end conversion goal -->
    {% else %}
    <script>
        var mktzCustom = { 'orderId': '{{ checkout.order_id }}' };
        var _mktz = _mktz || [];
        _mktz.push(['_Goal','sale','{{ order.total_price | money_without_currency }}', {transaction:'{{ order.order_number }}'}]);
    </script>
    {% endif %}

    Just paste this code into the Additional scripts section as it, no adaptations are necessary.

    How Can I Change the Design on the Survey in Explore?

    You can change the design of the survey by manually picking a color scheme from the “Appearance” tab of the Edit Survey section:

    If you are comfortable with writing CSS code, you can edit the survey from the Appearance tab > Advanced CSS, provided you use the CSS selectors from this article.

    Audience set-up

    The audience will be automaticaly set-up on the “thank_you” page, so the customers can receive the survey only after they made the purchase. No further changes need to be done here.

    Additional details needed?

    Please don’t hesitate to reach out to our amazing customer support team if you need any additional information.

    Was this post helpful?