Use Case: Different Styles for Social Media

In this use case, we'll explore how to apply different section classes or designs to your website based on the referral source from social media platforms such as Instagram or Facebook. By customizing the appearance of specific sections of your website for each social media platform, you can create a more tailored and engaging experience for visitors coming from different sources.

Scenario

Imagine you're promoting your website or products/services on various social media platforms, including Instagram, Facebook and LinkedIn. Each platform has its own visual style, audience demographics, and engagement preferences. You want to adapt the design of specific sections of your website to match the aesthetic and expectations of visitors from each social media platform, enhancing user experience and maximizing conversion rates.

Implementation

To implement different section classes for social media platforms, you can use UTM parameters to identify the referral source and apply corresponding section classes dynamically. Below is an example of how you can structure the HTML markup for different sections:

<section @class([
    'instagram-section' => hasUtm('source', 'instagram'),
    'facebook-section' => hasUtm('source', 'facebook'),
    'linkedin-section' => hasUtm('source', 'linkedin')
])>
    <!-- Content for respective social media visitors -->
</section>

In this example, the Blade code includes a default section (default-section) for the website's base content. It then checks the value of the UTM parameter source to determine the referral source from social media platforms such as Instagram, Facebook or LinkedIn. Based on the source, it dynamically adds the corresponding section class (instagram-section, facebook-section, etc.) to apply the specific styles for that platform.

Conclusion

Customizing specific sections of your website based on the referral source from social media platforms can significantly enhance user engagement and conversion rates. By tailoring the content and design of these sections to match the visual identity of each platform, you can create a cohesive brand experience and resonate with visitors from different social media channels, ultimately leading to improved performance and results.