Shopify integration

Step 1. Set up custom conversion eventsCopy Anchor Link

Skro supports two types of conversion events:

• Standard Event – Tracks a single event only.
• Custom Conversion Events – Tracks multiple events. (Note: Skro’s custom conversions are not the same as Facebook’s Custom Conversions. You can use standard events as custom conversions in Skro.)

Let’s create five custom conversion events that are compatible with both Facebook and TikTok ads.

1. In Skro, go to Custom Conversions → Create.

2. Create an event called AddToCart.

3. Create an event called InitiateCheckout.

4. Create an event called Purchase.

5. Create an event called PageView.

6. Create an event called ViewContent.

Step 2. Add Shopify integrationCopy Anchor Link

1. Go to Settings → Integrations in Skro.

2. In the Revenue Sync section, click Add.

3. Click the Shopify template. The integration form will open.

4. Enter your Shopify store name.

5. Enter your Shop ID. You can find it in your Shopify admin → Settings. It looks like this: xxxxx.myshopify.com.

6. Enter your Shopify Webhook ID. In your Shopify admin go to Settings → Notifications → Webhooks, copy your webhook token, and paste it into Skro.

7. When finished, click Save & Close.

Your Shopify integration is now successfully connected.

Step 3. Set up Shopify WebhooksCopy Anchor Link

Choose a supported webhook API version. Shopify versions webhook payloads along with its APIs; see Shopify API versioning when reviewing your configuration.

1. Go to your Shopify admin → Settings → Notifications → Webhooks and click Create Webhook.

2. Create a webhook for Checkout creation:

• Event: Checkout creation
• Format: JSON
• URL: https://skrotrack.com/webhook/shopify?ce=InitiateCheckout
• Webhook API version: select a supported version in Shopify

3. Create another webhook for Order creation:

• Event: Order creation
• Format: JSON
• URL: https://skrotrack.com/webhook/shopify?ce=Purchase
• Webhook API version: select a supported version in Shopify

4. (Optional) If you prefer not to use Skro Custom Conversions for the Purchase event and instead use a standard postback, configure your webhook like this. The conversion event name will be taken from your campaign (Step 1).

5. Standard postback webhook setup:

• Event: Order creation
• Format: JSON
• URL: https://skrotrack.com/webhook/shopify
• Webhook API version: select a supported version in Shopify

Step 4. Add custom pixels for other eventsCopy Anchor Link

AddToCart EventCopy Anchor Link

You can't track AddToCart events with Webhook, that is why it is needed to install custom tracking pixel.

1. Go to your Shopify admin → Settings → Customer Events and click Add custom pixel.

2. Add your pixel name: Add To Cart Pixel

3. Analytics and Marketing needs to be selected.

4. Place the custom tracking pixel code to track Add To Cart events.

5. Copy the pixel code. You can use your own custom tracking domain and if your event name is different, then change it.

analytics.subscribe('product_added_to_cart', (event) => {
    const trackingDomain = "skrotrack.com"
    const eventName = "AddToCart"
    const cartLine = event.data.cartLine;
    const cartLineCost = cartLine.cost.totalAmount.amount;
    const cartLineCostCurrency = cartLine.cost.totalAmount.currencyCode;
    
    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) {
            return parts.pop().split(';').shift();
        }
        return null;
    }
    
    let clickId = getCookie("skro-click-id") || sessionStorage.getItem("skro-click-id");
    
    if (!clickId) {
        return;
    }
    
    const url = `https://${trackingDomain}/postback?clickId=${encodeURIComponent(clickId)}&payout=${encodeURIComponent(cartLineCost)}&payoutCurrencyCode=${encodeURIComponent(cartLineCostCurrency)}&ce=${eventName}`;
    
    fetch(url, {method: 'GET', keepalive: true}).catch(err => console.error("Skro tracking pixel error:", err));
});

6. Click Save and Connect this pixel with your store.

PageView eventCopy Anchor Link

1. Add new pixel with name: Page View Pixel

2. Copy the pixel code. You can use your own custom tracking domain and if your event name is different, then change it.

analytics.subscribe('page_viewed', (event) => {
    const urlParams = new URLSearchParams(window.location.search);
    const clickId = urlParams.get('skrocid');
    
    const trackingDomain = "skrotrack.com"
    const eventName = "PageView"
    
    if (!clickId) {
        return;
    }
          
    const url = `https://${trackingDomain}/postback?clickId=${encodeURIComponent(clickId)}&ce=${eventName}`;
        
    fetch(url, {method: 'GET',keepalive: true}).catch(err => console.error("Skro tracking pixel error:", err));
});

3. Click Save and Connect this pixel with your store.

ViewContent eventCopy Anchor Link

1. Add new pixel with name: View Content Pixel

2. Copy the pixel code. You can use your own custom tracking domain and if your event name is different, then change it.

analytics.subscribe('product_viewed', (event) => {
    const urlParams = new URLSearchParams(window.location.search);
    let clickId = urlParams.get('skrocid');
    
    const productTitle = event?.data?.productVariant?.product?.title || "Unknown product name";
    
    const trackingDomain = "skrotrack.com"
    const eventName = "ViewContent"
    
    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) {
            return parts.pop().split(';').shift();
        }
        return null;
    }
    
    if (!clickId) {
        clickId = getCookie("skro-click-id") || sessionStorage.getItem("skro-click-id");
    }
        
    if (!clickId){
        return;
    }
          
    const url = `https://${trackingDomain}/postback?clickId=${encodeURIComponent(clickId)}&ce=${eventName}&p1=${encodeURIComponent(productTitle)}`;
        
    fetch(url, {method: 'GET',keepalive: true}).catch(err => console.error("Skro tracking pixel error:", err));
});

3. Click Save and Connect this pixel with your store.

Step 5. Create a Campaign in SkroCopy Anchor Link

1. In Skro, go to the Affiliate Networks view, click Create, select Shopify, and fill in the details.

2. Add your store as an offer. Go to the Offers view, click Create, and enter your Shopify store details.

3. Select a workspace.

4. Enter a name for your store.

5. Enter your store URL with the Skro Click ID parameter: ?skrocid={clickId}

6. Select Shopify as the affiliate network.

7. Click Save & Close.

8. (Optional) If you use a pre-lander, go to the Landings view, click Create, and add your landing page.

9. Navigate to the Ads Manager view and click Create.

10. Select your integrated Traffic Source (e.g. Facebook).

11. Select your Conversion Event Name. This must match exactly (case-sensitive) between Skro and your traffic source.

12. Select your Conversion Pixel. This is required for sending conversion data back to your traffic source.

13. Set Cost Model to Auto.

14. Select your cost currency.

15. Click Next.

16. Choose a workspace.

17. Add a descriptive campaign name.

18. Click Next.

19. Choose your Destination Type (in this example: flow).

20. Select your redirect mode (in this example: 302 redirect).

21. Select your landing setup (in this example: use only offers).

22. Select your offer (your Shopify store).

23. Click Save.

24. Choose your tracking method: Shopify Redirect or Shopify Direct. (In this example we use Shopify Redirect.)

25. Copy your Skro Tracking Pixel JS and return to Shopify Admin.

26. In Shopify admin, go to Themes → Actions → Edit Code.

27. Open the theme.liquid file.

28. Paste the Skro tracking pixel inside the <head></head> section.

Step 6. Track Shopify Organic TrafficCopy Anchor Link

1. In Skro, go to Ads Manager and duplicate your existing campaign.

2. Create a new traffic source named Organic.

3. Select your store as the offer and click Save.

4. Choose Shopify Direct and select your Store from Offer URL dropdown menu.

Here’s an example of a tracking link for an organic campaign:

https://skro.myshopify.com/?skrocid={clickId}&trck=eyJjcGlkIjoiM2M0NzZjOGEtYjJiNi00MDRjLTg5NGYtMDIyOWVlNjZiMTA1IiwiciI6MCwicCI6MCwibyI6MH0=&ad_id={{ad.id}}&ad_name={{ad.name}}&adset_id={{adset.id}}&adset_name={{adset.name}}&campaign_id={{campaign.id}}&campaign_name={{campaign.name}}&placement={{placement}}&site_source_name={{site_source_name}}

The important part is the trck parameter value. In this example it looks like:

5. Copy this trck parameter value. Then, in your Shopify admin → Theme → Actions → Edit Code, open theme.liquid.

6. At the top of your Skro tracking pixel, find the config parameter named organicCampaignToken and paste the copied token value there.