Have Pinegrow interaction run only on first visit

Javascript
1

As the title suggests, I’m looking to use some kind of caching so that the javascript wont run after the first visit.

I have an animation that runs on the landing page that obscures all other content for two seconds~. It’s nice for the first but if people want to come back to homepage, refresh etc. it’s obviously annoying.

Not really sure how to approach this, perhaps the animation parent div could be deleted and cached to be gone as it no longer serves a purpose? Keen to have feedback on this.

2

I’m not an expert on Interactions, but here is how I would do it.
You have a couple of choices, depending on how long you want the block to re-running the animation to exist and what your privacy policies are currently.
For long-term blocking you’ll want to add a cookie value with a stated expiration. This will persist even if the visitor quits the browser. When the user refreshes the page you use JS to fetch the cookie value and then change some classes on the page. Those classes would be incorporated into your Interactions target values.
For shorter term blocking, you can either use session storage (only persists as long as the visitor doesn’t close the current browser tab) or local storage (persists as long as the visitor doesn’t quit the browser) and do the same thing.
Not being an interactions expert, I don’t have a good feeling for whether you it would be easy to add the variable check on some main script and I’m not by my computer to check. If nobody else responds I can try to check this a little later.

Hope this helps.
Bob



1 Like
3

Thanks for directing me to the relevant resources Rob.

I toyed around with sessionStorage to save the state of the preload div classes because the final step of the interaction is to add a class with the css property of display: hidden. The other option I looked at was having something like document.getElementsByClassName("removeclass")[0].remove(); where the preload div is removed once ‘removeclass’ is added to the preload div at the end of the interaction.

Unfortunately I’m an absolute javascript novice so I’ve been stuck looking through stackoverflow solutions and blog posts to try and figure something out. I’ll keep playing with this when I have the time but if anyone feels like lending a helping hand, it would be greatly appreciated.

4

@snowfeald I’m happy to write you some code if you give me a little better overview of the project. Right now not sure what is being animated/hidden/revealed.
Cheers,
Bob

5

Wow, thanks Rob!

Basically I have a page structured like this: https://codepen.io/snowfealds/pen/WNGeyON where the preload div covers all other content, a pinegrow interaction is set to run when the page finishes loading, and when that animation is completed the “preload-hold” is hidden so that the user can see the actual site content.

Whenever someone reloads the homepage (the only page the preloader is on) / comes back to the page etc. they have to view the animation again. So the goal is to use some kind of cookies to hide it after the first visit. sessionStorage seems appropriate for this as I don’t mind them viewing it again if they return at a later time.

https://github.com/js-cookie/js-cookie I came across this which could be good, though I haven’t had tiome to do more research since last writing…

Thanks once again!!

6

@snowfeald Here you go. Drag this script to the insert code box and then drag the resulting element below the insert code box to the end of the body, or add it using your favorite code editor.

image
image826×634 40 KB

You can remove the comments for production, I just put them into explain what each step was doing. I might also customize the session variable name be prefixing it to make it unique. Likely no other site is using “isNotFirstVisit”, but you never know! After adding you may need to refresh the page.

<script>
//While page is loading check if there is a session variable set for isNotFirstVisit - will be null if this is the first visit
let isNotFirstVisit = sessionStorage.getItem("isNotFirstVisit");
//check if isNotFirstVisit = null (or false)
if(!isNotFirstVisit) {
    //if this is the first visit, let the animation play and set the variable to "true"
    sessionStorage.setItem("isNotFirstVisit", true);
} else {
    //if this is not the first visit then find the pre-loader - this assumes that the first item with the class name "preload-hold" is the one you want hidden
    let loader = document.getElementsByClassName("preload-hold")[0];
    //set the visibility to hidden
    loader.style.visibility = "hidden";
    //set the display to none
    loader.style.display ="none";
}
</script>

Good Luck and keep me posted!
Bob
2 Likes
7

Hi Rob, this works perfectly! On a live site going from one page back to the homepage, the preloader is gone straight away; this is exactly what I wanted! I’d love to send you some coin for this if you wouldn’t mind?

Cheers,

3 Likes
8

My case is similar, I am too looking for one of my animations not to repeat after the first session (page load) just like @snowfeald but the thing is I can’t hide or display “none” the element (like your script above) as there are some more interactions in that very same element and they need to keep working after the first load.

So I was trying to use the functionality, Trigger condition > has a class on the specific interaction. Then by removing that class after the first-page load, the animation would not trigger as js deleted that class. Hope it makes sense.
I am trying to manipulate your script but js is out of my skills.

Any hint would be really appreciated.

<script> //While page is loading check if there is a session variable set for isNotFirstVisit - will be null if this is the first visit let isNotFirstVisit = sessionStorage.getItem("isNotFirstVisit"); //check if isNotFirstVisit = null (or false) if(!isNotFirstVisit) { //if this is the first visit, let the animation play and set the variable to "true" sessionStorage.setItem("isNotFirstVisit", true); } else { //if this is not the first visit then find the pre-loader - this assumes that the first item with the class name "preload-hold" is the one you want hidden let loader = document.getElementsByClassName("browser-session")[0]; element.classList.remove("browser-session"); } </script>

9

Hi @red-rosefields,
You will just have to make a small change to the else section.

//Find the first element [0] on the page with the targeted class name
let loader = document.getElementsByClassName("your-class-name")[0];
//remove that class name from the element
loader.classList.remove("your-class-name");

Make sure to replace “your-class-name” with the actual class name. Also, I’m assuming that the class name you want to remove is the very first on the page. These two lines of code will replace the entire else section from the original script. Everything else will remain the same.

Cheers,
Bob

3 Likes
10

It worked like a charm! Thanks again @RobM

1 Like