First, get your NPS Checklist from here to keep tracking of your to-do steps and get you started!
Requirements:
Reveal account installed on Shopify (https://www.omniconvert.com/help/kba/how-to-integrate-reveal-with-shopify-for-new-reveal-users/ or https://www.omniconvert.com/help/kba/how-to-integrate-reveal-with-shopify-for-existing-reveal-users/)
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 Settings > Integrations section > 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:
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
- Go to “Theme” and click “Customize”
- Click on the three dots and select “Edit Code”
- 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(/"/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.
Creating the Pre-delivery NPS Survey
Step 1. Log into Omniconvert and click on Surveys and then go to Create new survey
Step 2. Click on “New survey” from the right:
Step 3. Name it and choose Pop-up:
Step 4. The first questions must be the NPS question, so select Net Promoter Score for the answer type and Save it:
Step 5. Add a new question
Step 6. This second question is a follow-up question, a chance for you to find out why the customer chose that score. It should be a Small text answer type.
What’s most important here is that you should direct the customer to the end screen after this question. We’ll have a third question as well, but that should remain hidden, as it’s where we’ll save the transaction ID.
To send the customer to the end screen, click “Advanced settings (logic branching / triggering), select “Go to end screen” and Save:
Step 7. Add a new question, that’s going to be hidden, select the “Small text answer” type and Save:
Step 8. Save all you’ve done so far by clicking “Save and continue”:
Step 9. It’s time to save your transaction id on the thank you page in this hidden field we created.
We need 2 pieces of information:
a) the survey ID. When you edit the NPS pre-delivery survey, look in your URL. There you can find the number representing the ID of the survey (this only works after you’ve saved the survey – see Step 8):
b) the unique ID of the hidden question. You can see that ID in the bottom right corner of the question:
Step 11. Insert this code:
(function (_mktz, api) {
"use strict";
var surveyApi = api.survey();
autoAnswerHiddenNPS();
function autoAnswerHiddenNPS() {
var questionUniqueID = "INSERT_YOUR_HIDDEN_QUESTION_ID_HERE";
var orderID = window.mktzCustom && window.mktzCustom.orderId ? window.mktzCustom.orderId : 0;
surveyApi.autoAnswer(
questionUniqueID,
"[HIDDEN_ORDER_EID]:" + orderID
);
}
})(_mktz, _mktz._api.get("v0", "INSERT_YOUR_SURVEY_ID"));
Step 12. Here, you need to replace “INSERT_YOUR_HIDDEN_QUESTION_ID_HERE” with the actual id (in our example, “fIKTzKzo”). Then, you need to replace “INSERT_YOUR_SURVEY_ID” with your survey ID (in our example, “54226”).
Make sure you keep the quotes when making changes:
Step 13. Setup the survey to only show on thank you page. Go to the Audience tab. Make changes to the settings on that page depending on how your thank-you URL pages structure looks.
For example you could be using something like URL contains “thank_you” or URL contains “orders”:
Attention: from Frequency settings in the Audience tab, survey should be set to every time. This is useful to have the survey shown for each different order. Fear not, if the user submits an NPS, and refreshes the page, the same survey will not be shown:
Step 14. Don’t forget to save all your hard work, by clicking the “Save and continue” button. Once everything is set, publish the survey by clicking the red “Publish” button:
How Can I Change the Design on the Survey?
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.
How can I test the survey?
First, from the Shopify admin panel, go to Orders, select and open any one of them. Then go to More actions, and click on “View order status page”. You will be taken to a new page.
Take a look at the URL of that page. Perhaps it’s something like “myshop.myshopify.com/56819974333/orders/edc576a79bfa77491bdd555795b1d33d”
If that’s the case, in the Pre-delivery NPS survey, in your Audience settings, you can set: URL contains “orders”. Save and Publish the survey, go on the order’s URL and the survey should be displayed.
Then, you should also make a test order. Once you reach the thank-you page, don’t refresh it. Just take a note of the URL of that page. Make the Audience settings changes accordingly and save the survey. Ensure it’s published. Go back to that URL and see the survey displayed.
After all testing is done, remember to set the Audience to URL contains “thank_you”.
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?
