elementor4fun-logo
Last update: May 29, 2024

Conditions in Oxygen: how show/hide content based on UTM tags?

Starting from version 2.4, Oxygen has a powerful and useful "Conditions" functionality. More details can be found in the official documentation. Using the conditionals feature, we can now hide or show certain site content depending on the fulfilment of conditions. This can be useful, for example, to create hidden content only for subscribers of the site, or to create paid closed sections. In addition to the 26 built-in conditions, we can now create unique conditions using the API. Cases of using conditions may be different and are limited only by your need and imagination. In this tutorial, I want to share with you my experiment on hiding content based on UTM tags. I'm still testing it, but it seems to be working well. And so, I tell you how to do it step by step.

Step 1

Install the Code Snippets plugin, if you haven't installed it yet. We will need to add a small amount of PHP code to register our conditions.

Step 2

Create a new snippet Snippets > Add new (for example, I called it "Testing UTM-tags", but you can give it any name you need). In the snippet field, paste the following code and save the changes:
if( function_exists('oxygen_vsb_register_condition') ) {
	
	oxygen_vsb_register_condition('UTM source', array('options' => array(), 'custom' => true), array('=='), 'utm_source_callback', 'UTM');
	function utm_source_callback($value, $operator) {
		if (isset($_GET['utm_source'])){
    		$utm_source = $_GET['utm_source'];
    		$expire=time()+60*60*24*5;
    		setcookie("utm_source", $utm_source, $expire);
			return oxy_condition_eval_int($utm_source, $value, $operator);
		}
	}
	
	oxygen_vsb_register_condition('UTM medium', array('options' => array(), 'custom' => true), array('=='), 'utm_medium_callback', 'UTM');
	function utm_medium_callback($value, $operator) {
		if (isset($_GET['utm_medium'])){
    		$utm_medium = $_GET['utm_medium'];
    		$expire=time()+60*60*24*5;
    		setcookie("utm_medium", $utm_medium, $expire);
			return oxy_condition_eval_string ($utm_medium, $value, $operator);
		}
	}
	
	oxygen_vsb_register_condition('UTM campaign', array('options' => array(), 'custom' => true), array('=='), 'utm_campaign_callback', 'UTM');
	function utm_campaign_callback($value, $operator) {
		if (isset($_GET['utm_campaign'])){
    		$utm_campaign = $_GET['utm_campaign'];
    		$expire=time()+60*60*24*5;
    		setcookie("utm_campaign", $utm_campaign, $expire);
			return oxy_condition_eval_string ($utm_campaign, $value, $operator);
		}
	}
	
	oxygen_vsb_register_condition('UTM content', array('options' => array(), 'custom' => true), array('=='), 'utm_content_callback', 'UTM');
	function utm_content_callback($value, $operator) {
		if (isset($_GET['utm_content'])){
    		$utm_content = $_GET['utm_content'];
    		$expire=time()+60*60*24*5;
    		setcookie("utm_content", $utm_content, $expire);
			return oxy_condition_eval_string ($utm_content, $value, $operator);
		}
	}
	
	oxygen_vsb_register_condition('UTM term', array('options' => array(), 'custom' => true), array('=='), 'utm_term_callback', 'UTM');
	function utm_term_callback($value, $operator) {
		if (isset($_GET['utm_term'])){
    		$utm_term = $_GET['utm_term'];
    		$expire=time()+60*60*24*5;
    		setcookie("utm_term", $utm_term, $expire);
			return oxy_condition_eval_string ($utm_term, $value, $operator);
		}
	}

}
In this example, I set the cookie lifetime to 5 days. This means that if a user comes to the site via a link with a UTM tag, then each time he visits the page, conditions will work until 5 days have passed, or until he clears the cookie in his browser. If you need to set cookies for a longer or shorter period, then on each line $expire=time()+60*60*24*5; replace 5 on the value that you need (in days). To save cookies for a specific condition or not, we will configure further in the next step.

Step 3

After registering conditions at the second step, in the list of conditions in the Oxygen editor, we should have new conditions: UTM sourceUTM mediumUTM campaignUTM content and UTM term. Next, we need to adjust the conditions for hiding / showing a block with content depending on our conditions. Suppose that we need to track the source (utm_source tag) from Google ads. Our link with the UTM can look like this: https://site.com/?utm_source=google&utm_medium=cpc&utm_campaign={network}&utm_content={creative}&utm_term={keyword} Now we need to create a condition, if the source is Google, then show on the page a special block that is initially hidden.

Variant 1: without tracking cookies

In this case, the block will be shown every time, but only if the link has an UTM tags. If the user enters this same page without any tags, the block will not be shown. Create a condition for our block by selecting from the list - UTM source and writing a word equal to the value of the tag - google. Save the result and check it. Thus, we can track the value of any of the UTM tags (not just utm_source).

Variant 2: with cookie tracking

In this case, the block will be shown when you first visit the link with UТM. If you refresh the page, or visit the page without the UTM tags, the block will still be shown to the user over the entire lifetime of the cookie (in our example, this is 5 days, or until the user clears the cookie itself). To do this, we will definitely need to change the condition type to OR and add an additional standard Cookie List condition in which we need to specify the value corresponding to the value of our UTM tag: Now the block will be displayed only if the url contains the word google OR cookies contains the word google. That's all. I hope this article has been helpful to you.
closealign-justifychevron-downcaret-up